原文地址：https://xeblog.cn/articles/12

引言

前后端分離的項(xiàng)目雖然降低了耦合度，但是引發(fā)的各種問(wèn)題也隨之而來(lái)踱讨。后端項(xiàng)目由Tomcat部署(監(jiān)聽(tīng)8080端口)惹谐，前端項(xiàng)目則部署在Nginx上（監(jiān)聽(tīng)80、443等非8080端口），前端頁(yè)面加載速度大大提高了葱椭，而當(dāng)ajax請(qǐng)求后端接口的時(shí)候卻報(bào)錯(cuò)了廓鞠。

image

同源策略

同源策略，它是由Netscape提出的一個(gè)著名的安全策略≡跚簦現(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略卿叽。所謂同源是指，域名，協(xié)議附帽，端口相同埠戳。

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

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

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

解決方案

配置addCorsMappings

新增一個(gè)類實(shí)現(xiàn) WebMvcConfigurer 接口喳钟，然后給這個(gè)類加上 @Configuration 注解屁使，最后實(shí)現(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);
    }
}

請(qǐng)求正常

image

這就完事了奔则？這么簡(jiǎn)單的嗎蛮寂？

登陸后臺(tái)管理看看

image

wtf?

image

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

按照我的邏輯易茬，上面那個(gè)報(bào)錯(cuò)的接口應(yīng)該是一個(gè)GET請(qǐng)求酬蹋，可為什么發(fā)的是OPTIONS請(qǐng)求？翻閱各種資料抽莱，各種百度google范抓，各種倒騰，各種頭疼食铐，最后匕垫。。虐呻。我掀開(kāi)了被子象泵，驚奇的發(fā)現(xiàn)。斟叼。偶惠。被窩可真暖和啊＠绻瘛（先睡一覺(jué)再說(shuō)）

image

image

原因

原來(lái)瀏覽器會(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)求瘾腰。

那為什么OPTIONS請(qǐng)求報(bào)錯(cuò)了。覆履。蹋盆。

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

image

放行OPTIONS

我換了一種解決跨域的方法召廷，使用攔截器解決跨域問(wèn)題，并且針對(duì)OPTIONS請(qǐng)求做放行處理账胧。

新增一個(gè)攔截器類 CorsInterceptor 實(shí)現(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é)束請(qǐng)求
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }

        return true;
    }
}

需將跨域攔截器放在校驗(yàn)攔截器之上

我把原來(lái)的跨域配置 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("/**");
        // 校驗(yàn)token的攔截器
        registry.addInterceptor(loginInterceptor).addPathPatterns("/admin/**");
    }

}

OPTIOINS請(qǐng)求沒(méi)問(wèn)題了

image

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

image

總結(jié)

晚安竞慢！

image

補(bǔ)充說(shuō)明

Access-Control-Allow-Credentials 響應(yīng)頭表示是否可以將對(duì)請(qǐng)求的響應(yīng)暴露給頁(yè)面。返回 true 則可以治泥，其他值均不可以筹煮。Credentials可以是 cookies, authorization headers 或 TLS client certificates。如果被設(shè)置為true居夹，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為 *败潦，需要指定域名，否則當(dāng)需要發(fā)送 Cookie 到服務(wù)器時(shí)准脂，瀏覽器響應(yīng)時(shí)將會(huì)報(bào)錯(cuò)变屁。

測(cè)試

Ajax請(qǐng)求開(kāi)啟 withCredentials 屬性

xhrFields: {
    withCredentials: true
}

后端跨域配置不變時(shí)，瀏覽器請(qǐng)求結(jié)果報(bào)錯(cuò)

image

指定 Access-Control-Allow-Origin 的值為 http://127.0.0.1:63344意狠，再次請(qǐng)求后正常

image

最終配置

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

        return true;
    }

參考

• http://levy.work/2016-09-01-why-got-options-request-via-ajax/

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_request_headers

• http://www.ruanyifeng.com/blog/2016/04/cors.html