Spring MVC配置CORS（解决跨域请求）

时间  2020-07-12 标签 spring mvc 配置 cors 解决 请求

1. CORS 简介

同源策略（same origin policy）是浏览器安全的基石。在同源策略的限制下，非同源的网站之间不能发送 ajax 请求的。css

为了解决这个问题，w3c 提出了跨源资源共享，即 CORS(Cross-Origin Resource Sharing)。html

CORS 作到了两点：前端

  1. 不破坏即有规则
  2. 服务器实现了 CORS 接口，就能够跨源通讯

基于这两点，CORS 将请求分为两类：简单请求和非简单请求。java

1.1 简单请求

能够先看下 CORS 出现前的状况：跨源时可以经过 script 或者 image 标签触发 GET 请求或经过表单发送一条 POST 请求，但这两种请求 HTTP 头信息中都不能包含任何自定义字段。jquery

简单请求对应该规则，所以对简单请求的定义为：ajax

请求方法是 HEAD、GET 或 POST 且 HTTP 头信息不超过如下几个字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）。spring

好比有一个简单请求：sql

GET /test HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Origin: http://www.examples.com
Host: www.examples.com

对于这样的简单请求，CORS 的策略是请求时，**在头信息中添加一个 Origin 字段**，服务器收到请求后，根据该字段判断是否容许该请求。json

  1. 若是容许，则在 HTTP 头信息中添加 Access-Control-Allow-Origin 字段，并返回正确的结果
  2. 若是不容许，则不在头信息中添加 Access-Control-Allow-Origin 字段。

浏览器先于用户获得返回结果，根据有无 Access-Control-Allow-Origin 字段来决定是否拦截该返回结果。后端

对于 CORS 出现前的一些服务，CORS 对他们的影响分两种状况：

  1. script 或者 image 触发的 GET 请求不包含 Origin 头，因此不受到 CORS 的限制，依旧可用。
  2. 若是是 ajax 请求，HTTP 头信息中会包含 Origin 字段，因为服务器没有作任何配置，因此返回结果不会包含 Access-Control-Allow-Origin，所以返回结果会被浏览器拦截，接口依旧不能够被 ajax 跨源访问。

能够看出，CORS 的出现，没有对”旧的“服务形成任何影响。

另外，除了提到的 Access-Control-Allow-Origin 还有几个字段用于描述 CORS 返回结果：

  1. Access-Control-Allow-Credentials: 可选，用户是否能够发送、处理 cookie。
  2. Access-Control-Expose-Headers：可选，可让用户拿到的字段。有几个字段不管设置与否均可以拿到的，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

1.2 非简单请求

除了简单请求以外的请求，就是非简单请求。

对于非简单请求的跨源请求，**浏览器会在真实请求发出前**，增长一次 OPTION 请求，称为预检请求（preflight request）。预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到 HTTP 头信息字段中，询问服务器是否容许这样的操做。

好比对于 DELETE 请求：

OPTIONS /test HTTP/1.1
Origin: http://www.examples.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: X-Custom-Header
Host: www.examples.com

与 CORS 相关的字段有：

  1. Access-Control-Request-Method: 真实请求使用的 HTTP 方法。
  2. Access-Control-Request-Headers: 真实请求中包含的自定义头字段。

服务器收到请求时，须要分别对 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 进行验证，验证经过后，会在返回 Http 头信息中添加

Access-Control-Allow-Origin: http://www.examples.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

他们的含义分别是：

  1. Access-Control-Allow-Methods: 真实请求容许的方法
  2. Access-Control-Allow-Headers: 服务器容许使用的字段
  3. Access-Control-Allow-Credentials: 是否容许用户发送、处理 cookie
  4. Access-Control-Max-Age: 预检请求的有效期，单位为秒。有效期内，不会重复发送预检请求

当预检请求经过后，浏览器会发送真实请求到服务器。这就实现了跨源请求。

了解完 CORS，接下来咱们来搭建简单的 Spring MVC 服务，并进一步了解 Spring MVC 如何配置 CORS。

2. Spring MVC 环境搭建

打开 http://start.spring.io/，添加 Web Dependency，而后选择 Generate Project，下载 zip 文件，就获得了一个 spring boot demo。

图片

解压 zip 文件，双击 pom.xml 打开或用 IDEA、Eclipse 将项目按照 maven 导入。

根据 Group、Artifact、Dependencies 填写的不一样，项目目录结构可能有些许差异，个人项目结构以下：

├── src
│   ├── main/java
│   |        └── net/xiayule/spring/cors
│   |            └── SpringBootCorsTestApplication.java
|   └── resources
|       ├── static
|       ├── templates
|       └── application.properties
|    
└── pom.xml

咱们须要关心的只有 SpringBootCorsTestApplication.java。在 SpringBootCorsTestApplication.java 添加如下代码：

@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication {

 @RequestMapping(value = "/test")
 public String greetings() {
 return "{\"project\":\"just a test\"}";
 }

 public static void main(String[] args) {
 SpringApplication.run(SpringBootCorsTestApplication.class, args);
 }
}

@RequestMapping(value = "/test") 的含义是该方法接受来自 /test 的请求，而且提供了对 HTTP 的 GET、POST、DELETE 等方法的支持。

运行项目的方法为，在项目根目录执行 mvn spring-boot:run 启动应用，打开浏览器访问 http://localhost:8080 便可看到效果：

图片

后端服务搭建好了，接着实现前端。为了简单，直接建立一个 test.html 文件，添加如下内容：

<!DOCTYPE html>
<html>
<head>
 <title>Hello CORS</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 <script>
 $(document).ready(function() {
 $.ajax({
 url: "http://localhost:8080/test",
 method: "POST",
 contentType: "application/json; charset=utf-8"
 }).then(function(data, status, jqxhr) {
 alert(data)
 });
 });
 </script>
</head>
<body>
</body>
</html>

使用浏览器打开该文件，就会触发一条向 http://localhost:8080 的请求。能够经过修改上面代码的 method，来触发不一样类型的请求。

因为是直接使用浏览器打开，**网页的源为 null**, 当向源 http://localhost:8080 请求时，就变成了跨源请求，所以若是后端不加 CORS 的配置，返回的 HTTP 头信息中不会包含 Access-Control-Allow-Origin，所以浏览器会报出以下错误：

图片

3. 配置 CORS

一个应用可能会有多个 CORS 配置，而且能够设置每一个 CORS 配置针对一个接口或一系列接口或者对全部接口生效。

举例来讲，咱们须要：

  1. 让 /test 接口支持跨源访问，而 /test/1 或 /api 等其它接口不支持跨源访问
  2. 让 /test/* 这一类接口支持跨源访问，而 /api 等其它接口不支持跨源访问
  3. 站点全部的接口都支持跨源访问

对第一种状况，若是想要对某一接口配置 CORS，能够在方法上添加 CrossOrigin 注解：

@CrossOrigin(origins = {"http://localhost:9000", "null"})
@RequestMapping(value = "/test", method = RequestMethod.GET)
public String greetings() {
 return "{\"project\":\"just a test\"}";
}

第二种状况，若是想对一系列接口添加 CORS 配置，能够在类上添加注解，对该类声明全部接口都有效：

CrossOrigin(origins = {"http://localhost:9000", "null"})
@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication {
 // xxx
}

第三种状况，添加全局配置，则须要添加一个配置类：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

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

另外，还能够经过添加 Filter 的方式，配置 CORS 规则，并手动指定对哪些接口有效。

@Bean
public FilterRegistrationBean corsFilter() {
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 CorsConfiguration config = new CorsConfiguration();
 config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:9000");
 config.addAllowedOrigin("null");
 config.addAllowedHeader("*");
 config.addAllowedMethod("*");
 source.registerCorsConfiguration("/**", config); // CORS 配置对全部接口都有效
 FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
 bean.setOrder(0);
 return bean;
}

4. 实现剖析

不管是经过哪一种方式配置 CORS，其实都是在构造 CorsConfiguration。
一个 CORS 配置用一个 CorsConfiguration 类来表示，它的定义以下：

public class CorsConfiguration {
 private List<String> allowedOrigins;
 private List<String> allowedMethods;
 private List<String> allowedHeaders;
 private List<String> exposedHeaders;
 private Boolean allowCredentials;
 private Long maxAge;
}

Spring MVC 中对 CORS 规则的校验，都是经过委托给 DefaultCorsProcessor 实现的。

DefaultCorsProcessor 处理过程以下：

  1. 判断依据是 Header 中是否包含 Origin。若是包含则说明为 CORS 请求，转到 2；不然，说明不是 CORS 请求，不做任何处理。
  2. 判断 response 的 Header 是否已经包含 Access-Control-Allow-Origin，若是包含，证实已经被处理过了, 转到 3，不然再也不处理。
  3. 判断是否同源，若是是则转交给负责该请求的类处理
  4. 是否配置了 CORS 规则，若是没有配置，且是预检请求，则拒绝该请求，若是没有配置，且不是预检请求，则交给负责该请求的类处理。若是配置了，则对该请求进行校验。

校验就是根据 CorsConfiguration 这个类的配置进行判断：

  1. 判断 origin 是否合法
  2. 判断 method 是否合法
  3. 判断 header 是否合法
  4. 若是所有合法，则在 response header 中添加响应的字段，并交给负责该请求的类处理，若是不合法，则拒绝该请求。

5. 总结

本文介绍了 CORS 的知识以及如何在 Spring MVC 中配置 CORS。

联系我们 沪ICP备13005482号-10