1、什么是跨域

由于瀏覽器同源策略（同源策略，它是由Netscape提出的一個(gè)著名的安全策略?，F(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。所謂同源是指，域名，協(xié)議，端口相同。），凡是發(fā)送請(qǐng)求url的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁(yè)面地址不同即為跨域。

具體可以查看下表：

2、springboot如何解決跨域問(wèn)題

1.普通跨域請(qǐng)求解決方案：

①請(qǐng)求接口添加注解@CrossOrigin(origins = "

說(shuō)明：origins = "

②通用配置（所有接口都允許跨域請(qǐng)求）

@Configuration 
public class CorsConfig { 
  private CorsConfiguration buildConfig() { 
    CorsConfiguration corsConfiguration = new CorsConfiguration(); 
    corsConfiguration.addAllowedOrigin("*"); // 1允許任何域名使用
    corsConfiguration.addAllowedHeader("*"); // 2允許任何頭
    corsConfiguration.addAllowedMethod("*"); // 3允許任何方法（post、get等） 
    return corsConfiguration; 
  } 

  @Bean 
  public CorsFilter corsFilter() { 
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
    source.registerCorsConfiguration("/**", buildConfig()); // 4 
    return new CorsFilter(source); 
  } 
} 

$.ajax({
    type:"GET",
    url:"http://localhost:8766/main/currency/sginInState",
    dataType:"JSON",
    data:{
      uid:userId
    },
    beforeSend: function (XMLHttpRequest) {
      XMLHttpRequest.setRequestHeader("Authorization", access_token);
    },
    success:function(res){
      console.log(res.code)
    }
  })

此時(shí)請(qǐng)求http://localhost:8766/main/currency/sginInState接口發(fā)現(xiàn)OPTIONS http://localhost:8766/main/currency/sginInState 500錯(cuò)誤，普通跨域的解決方案已經(jīng)無(wú)法解決這種問(wèn)題，為什么會(huì)出現(xiàn)OPTIONS請(qǐng)求呢？

原因

瀏覽器會(huì)在發(fā)送真正請(qǐng)求之前，先發(fā)送一個(gè)方法為OPTIONS的預(yù)檢請(qǐng)求 Preflighted requests 這個(gè)請(qǐng)求是用來(lái)驗(yàn)證本次請(qǐng)求是否安全的，但是并不是所有請(qǐng)求都會(huì)發(fā)送，需要符合以下條件：

•請(qǐng)求方法不是GET/HEAD/POST
•POST請(qǐng)求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

•請(qǐng)求設(shè)置了自定義的header字段

對(duì)于管理端的接口，我有對(duì)接口進(jìn)行權(quán)限校驗(yàn)，每次請(qǐng)求需要在header中攜帶自定義的字段（token），所以瀏覽器會(huì)多發(fā)送一個(gè)OPTIONS請(qǐng)求去驗(yàn)證此次請(qǐng)求的安全性。

為何OPTIONS請(qǐng)求是500呢？

OPTIONS請(qǐng)求只會(huì)攜帶自定義的字段，并不會(huì)將相應(yīng)的值帶入進(jìn)去，而后臺(tái)校驗(yàn)token字段時(shí) token為NULL，所以驗(yàn)證不通過(guò)，拋出了一個(gè)異常。

那么我們現(xiàn)在來(lái)解決這種問(wèn)題：

① spring boot項(xiàng)目application.yml中添加

spring:
mvc:
dispatch-options-request: true

注意：這種解決方案可能在某些情況下并不能解決OPTIONS問(wèn)題，原因可能是環(huán)境問(wèn)題，也可能是復(fù)雜的自定義filter過(guò)濾器配置問(wèn)題等。

②添加過(guò)濾器配置

第一步：手寫(xiě)RequestFilter請(qǐng)求過(guò)濾器配置類此類需要實(shí)現(xiàn)HandlerInterceptor類，HandlerInterceptor類是org.springframework.web.servlet.HandlerInterceptor下的。

具體代碼實(shí)現(xiàn)：

@Component
public class RequestFilter implements HandlerInterceptor {
  public boolean preHandler(HttpServletRequest request,HttpServletResponse response,Object handler){
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
    response.setHeader("Access-Control-Max-Age", "86400");
    response.setHeader("Access-Control-Allow-Headers", "Authorization");
    // 如果是OPTIONS請(qǐng)求則結(jié)束
    if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
      response.setStatus(HttpStatus.NO_CONTENT.value());
      return false;
    }
    return true;
  }
}

第二步：手寫(xiě)MyWebConfiguration此類需要繼承WebMvcConfigurationSupport。

注意：WebMvcConfigurationSupport是2.x版本以上的，1.x版本為WebMvcConfigurerAdapter 。

具體代碼實(shí)現(xiàn)：

@Component
public class MyWebConfiguration extends WebMvcConfigurationSupport{
  @Resource
  private RequestFilter requestFilter;
  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    // 跨域攔截器
    registry.addInterceptor(requestFilter).addPathPatterns("/**");
  }
}

總結(jié)

以上所述是小編給大家介紹的Springboot解決ajax+自定義headers的跨域請(qǐng)求問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論