前后端分离 开发环境通过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，然后重启浏览器。

会发现浏览器上方有如下提示，证明跨域配置生效。