爲何出現OPTIONS？SpringBoot接口跨域解決方案

時間 2019-11-09

標籤爲何出現 options springboot 接口解決方案欄目 Spring 简体版

原文原文鏈接

引言

先後端分離的項目雖然下降了耦合度，可是引起的各類問題也隨之而來。後端項目由Tomcat部署(監聽8080端口)，前端項目則部署在Nginx上（監聽80、443等非8080端口），前端頁面加載速度大大提升了，而當ajax請求後端接口的時候卻報錯了。前端

同源策略

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。ajax

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

後端地址： http://127.0.0.1:8080跨域

這兩個地址雖然ip地址和協議都同樣，可是端口不同，因此並不知足同源，這樣就形成了跨域的問題。瀏覽器

解決方案

配置addCorsMappings

新增一個類實現 WebMvcConfigurer 接口，而後給這個類加上 @Configuration 註解，最後實現 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);
    }
}
複製代碼

請求正常bash

這就完事了？這麼簡單的嗎？服務器

登錄後臺管理看看cookie

wtf?

爲什麼是OPTIONS請求？

按照個人邏輯，上面那個報錯的接口應該是一個GET請求，可爲何發的是OPTIONS請求？翻閱各類資料，各類百度google，各類倒騰，各類頭疼，最後。。。我掀開了被子，驚奇的發現。。。被窩可真暖和啊！（先睡一覺再說）

緣由

原來瀏覽器會在發送真正請求以前，先發送一個方法爲OPTIONS的預檢請求 Preflighted requests 這個請求是用來驗證本次請求是否安全的，並且並非全部請求都會發送，須要符合如下條件：

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

對於管理端的接口，我有對接口進行權限校驗，每次請求須要在header中攜帶自定義的字段（token），因此瀏覽器會多發送一個OPTIONS請求。

那爲何OPTIONS請求報錯了。。。

通過debug發現，OPTIONS請求只會攜帶自定義的字段，並不會將相應的值帶入進去，然後臺校驗token字段時 token爲NULL，因此驗證不經過，拋出了一個異常。

放行OPTIONS

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

新增一個攔截器類 CorsInterceptor 實現 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則結束請求
        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請求沒問題了

也相繼發送了GET請求

總結

晚安！

補充說明

Access-Control-Allow-Credentials 響應頭表示是否能夠將對請求的響應暴露給頁面。返回 true 則能夠，其餘值均不能夠。Credentials能夠是 cookies, authorization headers 或 TLS client certificates。若是被設置爲true，服務器不得設置 Access-Control-Allow-Origin 的值爲 *，須要指定域名，不然當須要發送 Cookie 到服務器時，瀏覽器響應時將會報錯。

測試

Ajax請求開啓 withCredentials 屬性

xhrFields: {
	withCredentials: true
}
複製代碼

後端跨域配置不變時，瀏覽器請求結果報錯

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

最終配置

@Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
		// 此處配置的是容許任意域名跨域請求，可根據需求指定
        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則結束請求
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }

        return true;
    }
複製代碼