前后端分离 开发环境通过CORS实现跨域联调

时间:2024-05-28 12:35:32

  通过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,然后重启浏览器。

前后端分离 开发环境通过CORS实现跨域联调

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

前后端分离 开发环境通过CORS实现跨域联调