跨域請求為什么出現(xiàn)OPTIONS請求？SpringBoot接口跨域解決方案

wwq圖書世界 2021-01-06

展開全文

§ 引言

前后端分離的項目雖然降低了耦合度，但是引發(fā)的各種問題也隨之而來。后端項目由Tomcat部署(監(jiān)聽8080端口)，前端項目則部署在Nginx上（監(jiān)聽80、443等非8080端口），前端頁面加載速度大大提高了，而當(dāng)ajax請求后端接口的時候卻報錯了。

§ 同源策略

同源策略，它是由Netscape提出的一個著名的安全策略?，F(xiàn)在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協(xié)議，端口相同。

前端地址： http://127.0.0.1:63344

后端地址： http://127.0.0.1:8080

這兩個地址雖然ip地址和協(xié)議都一樣，但是端口不一樣，所以并不滿足同源，這樣就造成了跨域的問題。

§ 解決方案

§ 配置addCorsMappings

新增一個類實現(xiàn) WebMvcConfigurer 接口，然后給這個類加上 @Configuration 注解，最后實現(xiàn) addCorsMappings 方法就ok了。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

請求正常

這就完事了？這么簡單的嗎？

登陸后臺管理看看

wtf?

§ 為何是OPTIONS請求？

按照我的邏輯，上面那個報錯的接口應(yīng)該是一個GET請求，可為什么發(fā)的是OPTIONS請求？翻閱各種資料，各種百度google，各種倒騰，各種頭疼，最后。。。我掀開了被子，驚奇的發(fā)現(xiàn)。。。被窩可真暖和?。。ㄏ人挥X再說）

§ 原因

原來瀏覽器會在發(fā)送真正請求之前，先發(fā)送一個方法為OPTIONS的預(yù)檢請求 Preflighted requests 這個請求是用來驗證本次請求是否安全的，而且并不是所有請求都會發(fā)送，需要符合以下條件：

請求方法不是GET/HEAD/POST
POST請求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
請求設(shè)置了自定義的header字段

對于管理端的接口，我有對接口進(jìn)行權(quán)限校驗，每次請求需要在header中攜帶自定義的字段（token），所以瀏覽器會多發(fā)送一個OPTIONS請求。

那為什么OPTIONS請求報錯了。。。

經(jīng)過debug發(fā)現(xiàn)，OPTIONS請求只會攜帶自定義的字段，并不會將相應(yīng)的值帶入進(jìn)去，而后臺校驗token字段時 token為NULL，所以驗證不通過，拋出了一個異常。

§ 放行OPTIONS

我換了一種解決跨域的方法，使用攔截器解決跨域問題，并且針對OPTIONS請求做放行處理。

新增一個攔截器類 CorsInterceptor 實現(xiàn) HandlerInterceptor 接口

@Component
public class CorsInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(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", "*");

        // 如果是OPTIONS則結(jié)束請求
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }

        return true;
    }
}

需將跨域攔截器放在校驗攔截器之上

我把原來的跨域配置 addCorsMappings 刪除了

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Resource
    private LoginInterceptor loginInterceptor;
    @Resource
    private CorsInterceptor corsInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
// 跨域攔截器需放在最上面
        registry.addInterceptor(corsInterceptor).addPathPatterns("/**");
// 校驗token的攔截器
        registry.addInterceptor(loginInterceptor).addPathPatterns("/admin/**");
    }

}

OPTIOINS請求沒問題了

也相繼發(fā)送了GET請求

§ 總結(jié)

晚安！

§ 補(bǔ)充說明

感謝 @沒落的宅男貴族 的友情提醒！

Access-Control-Allow-Credentials 響應(yīng)頭表示是否可以將對請求的響應(yīng)暴露給頁面。返回 true 則可以，其他值均不可以。Credentials可以是 cookies, authorization headers 或 TLS client certificates。如果被設(shè)置為true，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為 *，需要指定域名，否則當(dāng)需要發(fā)送 Cookie 到服務(wù)器時，瀏覽器響應(yīng)時將會報錯。

§ 測試

Ajax請求開啟 withCredentials 屬性

xhrFields: {
withCredentials: true
}

后端跨域配置不變時，瀏覽器請求結(jié)果報錯

指定 Access-Control-Allow-Origin 的值為 http://127.0.0.1:63344，再次請求后正常

§ 最終配置

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
// 此處配置的是允許任意域名跨域請求，可根據(jù)需求指定
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("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", "*");

        // 如果是OPTIONS則結(jié)束請求
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }

        return true;
    }