【SpringBoot2入门】003.跨域配置

《SpringBoot+SpringCloud+Vue+Element项目实战：手把手教你开发权限管理系统》读书笔记

跨域问题

为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。这叫作同源策略，同源策略是浏览器安全的基石。

如果一个请求地址里面的协议、域名和端口号都相同，就属于同源。

依据浏览器同源策略，非同源脚本不可操作其他源下面的对象，想要操作其他源下的对象就需要跨域。综上所述，在同源策略的限制下，非同源的网站之间不能发送AJAX请求。 如有需要，可通过降域或其他技术实现，比如下面要介绍的CORS技术。

什么是CORS

为了解决浏览器跨域问题，W3C提出了跨源资源共享方案，即CORS（Cross-Origin Resource Sharing）。

CORS可以在不破坏即有规则的情况下，通过后端服务器实现CORS接口，从而实现跨域通信。CORS将请求分为两类：简单请求和非简单请求，分别对跨域通信提供了支持。

1. 简单请求
在CORS出现前，发送HTTP请求时在头信息中不能包含任何自定义字段，且HTTP信息不超过以下几个字段：
· Accept
· Accept-Language
· Content-Language
· Last-Event-ID
· Content-Type（仅限于[application/x-www-form-urlencoded、multipart/form-data、text/plain]类型）
对于简单请求，CORS的策略是请求时在请求头中增加一个Origin字段，服务器收到请求后，根据该字段判断是否允许该请求访问。
· 如果允许，就在HTTP头信息中添加Access-Control-Allow-Origin字段，并返回正确的结果。
· 如果不允许，就不在HTTP头信息中添加Access-Control-Allow-Origin字段。
除了上面提到的Access-Control-Allow-Origin，还有几个字段用于描述CORS返回结果：
· Access-Control-Allow-Credentials：可选，用户是否可以发送、处理cookie。
· Access-Control-Expose-Headers：可选，可以让用户拿到的字段。有几个字段无论设置与否都可以拿到的，包括Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

2. 非简单请求
对于非简单请求的跨源请求，浏览器会在真实请求发出前增加一次OPTION请求，称为预检请求（preflight request）。预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中，询问服务器是否允许这样的操作。
与CORS相关的字段有：
· 请求使用的HTTP方法Access-Control-Request-Method。
· 请求中包含的自定义头字段Access-Control-Request-Headers。

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Access-Control-Request-Headers: authorization,content-type,session-str,user-id
Access-Control-Request-Method: POST
Connection: keep-alive
Host: www.test.com
Origin: https://www.test.com:8080
Referer: https://www.test.com:8080/admin/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

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

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Authorization, User-Id, Session-Str, Info
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 0
Content-Type: application/json;charset=utf-8
Date: Fri, 20 Mar 2020 05:16:04 GMT
Server: CloudWAF
Set-Cookie: HWWAFSESID=c2c2e76e80190802a1; path=/
Set-Cookie: HWWAFSESTIME=1584681362584; path=/

它们的含义分别是：
· Access-Control-Allow-Methods：真实请求允许的方法。
· Access-Control-Allow-Headers：服务器允许使用的字段。
· Access-Control-Allow-Credentials：是否允许用户发送、处理cookie。
· Access-Control-Max-Age：预检请求的有效期，单位为秒。有效期内，不会重复发送预检请求。
当预检请求通过后，浏览器才会发送真实请求到服务器。这样就实现了跨域资源的请求访问。

CORS实现

CORS的代码实现比较简单，主要是要理解CORS实现跨域的原理和方式。在config包下新建一个CORS配置类WebMvcConfigurer.java，实现WebMvcConfigurer接口。

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    /**
     * 重写addCorsMappings方法实现跨域的设置
     * 当然跨域还可以通过在Controller或方法上添加‘@CrossOrigin("http://www.test.com")’的注解实现，不过下面这种方便统一管理
     * 参考：https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#mvc-cors
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")  //允许跨域访问的路径
                .allowedOrigins("http://www.test.com")    //允许跨域访问的源
                .allowedMethods("GET", "POST", "DELETE", "OPTIONS", "DELETE")    //允许的请求方法
                .allowedHeaders("header1", "header2", "header3")    //允许的头部设置
                .exposedHeaders("header1", "header2")   //暴露的头部设置
                .allowCredentials(true) //是否发送cookie
                .maxAge(3600);  //预检间隔时间
    }
}

这样，每当客户端发送请求的时候，都会在头部附上跨域信息，就可以支持跨域访问了。