前后端分離 開發環境通過CORS實現跨域聯調

　　通過JSONP實現跨域已是老生常談，JSONP跨域限制多，最近了解了一下CORS。

　　參考：

　　　　https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

　　　　http://newhtml.net/using-cors/

　　　　https://www.w3.org/TR/2013/PR-cors-20131205/

　　CORS是W3c的一個工作草案，定義了在跨域訪問資源時瀏覽器和服務器應該如何溝通。CORS背后的基本思想是使用自定義的HTTP頭部讓瀏覽器和服務器進行溝通，從而決定請求或響應成功與否。

　　比如一個簡單的使用get或post發送的請求，它沒有自定義的頭部，而主體內容是text/plain。在發送該請求時，需要給它附加一個額外的Origin頭部，其中包含請求頁面的源信息（協議，域名和端口），以便服務器根據這個頭部信息來決定是否給予相應。

　　Origin:http://www.nczonline.net

　　如果服務器認為這個請求可以接受，就在Access-Control-Allow-Origin頭部中回發相同的源信息（如果是公共資源，可以回發***）。

　　Access-Control-Allow-Origin://www.nczonline.net

　　如果沒有這個頭部，或者有這個頭部但源信息不匹配，瀏覽器就會駁回請求。正常情況下，瀏覽器會處理請求。注意請求和響應都不包含cookies信息。

　　同源策略：是瀏覽器最核心也最基本的安全功能；同源指的是：同協議，同域名和同端口。精髓：認為自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被允許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源；參考:JavaScript 的同源策略
　　JSON & JSONP:JSON 是一種基於文本的數據交換方式，或者叫做數據描述格式。JSONP是資料格式JSON的一種“使用模式”，可以讓網頁從別的網域要資料，由於同源策略，一般來說位於server1.example.com的網頁無法與不是 server1.example.com的服務器溝通，而HTML的script元素是一個例外。利用script元素的這個開放策略，網頁可以得到從其他來源動態產生的JSON資料，而這種使用模式就是所謂的JSONP

　　對比JSONP和CORS發現以下幾點區別：

1. JSONP只能實現GET請求，而CORS支持所有類型的HTTP請求
2. 使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得數據，比起JSONP有更好的錯誤處理
3. JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS

　　最近做項目，前端使用vue,后端使用spring-boot，前后端完全分離，開發聯調的時候碰到了跨域問題，用了CORS解決跨域。

　　查看了spring中幾個cors相關的類：

　　org.springframework.web.cors.CorsConfiguration

　　org.springframework.web.servlet.config.annotation.CorsRegistry

　　org.springframework.web.cors.DefaultCorsProcessor

　　其中DefaultCorsProcessor源碼如下：

/*
 * Copyright 2002-2016 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package org.springframework.web.cors;

import java.io.IOException;
import java.nio.charset.Charset;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.http.server.ServletServerHttpResponse;
import org.springframework.util.CollectionUtils;
import org.springframework.web.util.WebUtils;

/**
 * The default implementation of {@link CorsProcessor}, as defined by the
 * <a href="http://www.w3.org/TR/cors/">CORS W3C recommendation</a>.
 *
 * <p>Note that when input {@link CorsConfiguration} is {@code null}, this
 * implementation does not reject simple or actual requests outright but simply
 * avoid adding CORS headers to the response. CORS processing is also skipped
 * if the response already contains CORS headers, or if the request is detected
 * as a same-origin one.
 *
 * @author Sebastien Deleuze
 * @author Rossen Stoyanchev
 * @since 4.2
 */
public class DefaultCorsProcessor implements CorsProcessor {

    private static final Charset UTF8_CHARSET = Charset.forName("UTF-8");

    private static final Log logger = LogFactory.getLog(DefaultCorsProcessor.class);


    @Override
    @SuppressWarnings("resource")
    public boolean processRequest(CorsConfiguration config, HttpServletRequest request, HttpServletResponse response)
            throws IOException {

        if (!CorsUtils.isCorsRequest(request)) {
            return true;
        }

        ServletServerHttpResponse serverResponse = new ServletServerHttpResponse(response);
        if (responseHasCors(serverResponse)) {
            logger.debug("Skip CORS processing: response already contains \"Access-Control-Allow-Origin\" header");
            return true;
        }

        ServletServerHttpRequest serverRequest = new ServletServerHttpRequest(request);
        if (WebUtils.isSameOrigin(serverRequest)) {
            logger.debug("Skip CORS processing: request is from same origin");
            return true;
        }

        boolean preFlightRequest = CorsUtils.isPreFlightRequest(request);
        if (config == null) {
            if (preFlightRequest) {
                rejectRequest(serverResponse);
                return false;
            }
            else {
                return true;
            }
        }

        return handleInternal(serverRequest, serverResponse, config, preFlightRequest);
    }

    private boolean responseHasCors(ServerHttpResponse response) {
        try {
            return (response.getHeaders().getAccessControlAllowOrigin() != null);
        }
        catch (NullPointerException npe) {
            // SPR-11919 and https://issues.jboss.org/browse/WFLY-3474
            return false;
        }
    }

    /**
     * Invoked when one of the CORS checks failed.
     * The default implementation sets the response status to 403 and writes
     * "Invalid CORS request" to the response.
     */
    protected void rejectRequest(ServerHttpResponse response) throws IOException {
        response.setStatusCode(HttpStatus.FORBIDDEN);
        response.getBody().write("Invalid CORS request".getBytes(UTF8_CHARSET));
    }

    /**
     * Handle the given request.
     */
    protected boolean handleInternal(ServerHttpRequest request, ServerHttpResponse response,
            CorsConfiguration config, boolean preFlightRequest) throws IOException {

        String requestOrigin = request.getHeaders().getOrigin();
        String allowOrigin = checkOrigin(config, requestOrigin);

        HttpMethod requestMethod = getMethodToUse(request, preFlightRequest);
        List<HttpMethod> allowMethods = checkMethods(config, requestMethod);

        List<String> requestHeaders = getHeadersToUse(request, preFlightRequest);
        List<String> allowHeaders = checkHeaders(config, requestHeaders);

        if (allowOrigin == null || allowMethods == null || (preFlightRequest && allowHeaders == null)) {
            rejectRequest(response);
            return false;
        }

        HttpHeaders responseHeaders = response.getHeaders();
        responseHeaders.setAccessControlAllowOrigin(allowOrigin);
        responseHeaders.add(HttpHeaders.VARY, HttpHeaders.ORIGIN);

        if (preFlightRequest) {
            responseHeaders.setAccessControlAllowMethods(allowMethods);
        }

        if (preFlightRequest && !allowHeaders.isEmpty()) {
            responseHeaders.setAccessControlAllowHeaders(allowHeaders);
        }

        if (!CollectionUtils.isEmpty(config.getExposedHeaders())) {
            responseHeaders.setAccessControlExposeHeaders(config.getExposedHeaders());
        }

        if (Boolean.TRUE.equals(config.getAllowCredentials())) {
            responseHeaders.setAccessControlAllowCredentials(true);
        }

        if (preFlightRequest && config.getMaxAge() != null) {
            responseHeaders.setAccessControlMaxAge(config.getMaxAge());
        }

        response.flush();
        return true;
    }

    /**
     * Check the origin and determine the origin for the response. The default
     * implementation simply delegates to
     * {@link org.springframework.web.cors.CorsConfiguration#checkOrigin(String)}.
     */
    protected String checkOrigin(CorsConfiguration config, String requestOrigin) {
        return config.checkOrigin(requestOrigin);
    }

    /**
     * Check the HTTP method and determine the methods for the response of a
     * pre-flight request. The default implementation simply delegates to
     * {@link org.springframework.web.cors.CorsConfiguration#checkOrigin(String)}.
     */
    protected List<HttpMethod> checkMethods(CorsConfiguration config, HttpMethod requestMethod) {
        return config.checkHttpMethod(requestMethod);
    }

    private HttpMethod getMethodToUse(ServerHttpRequest request, boolean isPreFlight) {
        return (isPreFlight ? request.getHeaders().getAccessControlRequestMethod() : request.getMethod());
    }

    /**
     * Check the headers and determine the headers for the response of a
     * pre-flight request. The default implementation simply delegates to
     * {@link org.springframework.web.cors.CorsConfiguration#checkOrigin(String)}.
     */
    protected List<String> checkHeaders(CorsConfiguration config, List<String> requestHeaders) {
        return config.checkHeaders(requestHeaders);
    }

    private List<String> getHeadersToUse(ServerHttpRequest request, boolean isPreFlight) {
        HttpHeaders headers = request.getHeaders();
        return (isPreFlight ? headers.getAccessControlRequestHeaders() : new ArrayList<String>(headers.keySet()));
    }

}

 

Spring 中對 CORS 規則的校驗，都是通過委托給 DefaultCorsProcessor實現的。

DefaultCorsProcessor 處理過程如下：

首先 CorsUtils.isCorsRequest(request) 通過request請求頭部是否包含origin頭部來判斷是否是cors請求，若不包含則返回true,若包含則繼續往下執行。

然后 responseHasCors(serverResponse) 判斷response頭部是否已經設置了Access-Control-Allow-Origin，如果已經設置了也不用再進行cors處理，返回true，若沒有設置Access-Control-Allow-Origin則繼續往下執行。

再判斷是否同源，判斷request帶的origin(請求的來源域)和forward(需要請求的資源)否一致（協議，域名，端口號一致），一致則證明不是跨域訪問返回true，不一致則繼續往下執行。

最后檢查是否是預請求，服務端是否有跨域配置，沒有跨域配置且不是預請求則返回true，沒有跨域配置但請求是預請求則拒絕該請求返回false。

若有跨域配置，則檢查請求中origin 是否合法，method 是否合法，header是否合法，如果全部合法，則在 response header中添加響應的字段，並交給負責該請求的類處理，如果不合法，則拒絕該請求。

spring-boot項目中通過繼承org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter，重寫addCorsMappings方法支持跨域

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

 

另外后端通過swagger提供接口參數說明及測試接口，瀏覽器也需要配置支持跨域，以chrome為例，設置支持跨域方式：

右鍵點擊chrome瀏覽器快捷方式，在屬性窗口中加入如下配置：--args --disable-web-security --user-data-dir=E:\chromeDevData，然后重啟瀏覽器。

 

 會發現瀏覽器上方有如下提示，證明跨域配置生效。