跨域之CORS技术

跨域

什么是跨域？

为了保证浏览器的安全，不同源的客户端脚本在没有明确的授权下不可读写对方资源，这就是同源策略。非同源脚本不可操作其他源下面的资源，如果想要操作就需要跨域。综上所述，非同源网站之间不能发送AJAX请求，如有需要则需降域或通过其他技术实现。

CORS技术

CORS在不改变现有规则下，通过后端实现CORS接口，实现通信之间的跨域。CORS技术分为两种，简单请求和非简单请求。

简单请求

在平时的请求中HTTP头信息中不能添加自定义字段，且不超过以下字段：

accept、
accept-language、
content-language、
last-event-id、
content-type

对于简单请求而言，CORS的策略是在请求头中添加一个origin字段，服务器收到请求后，判断是否允许该请求访问。
如果允许就在HTTP头信息中添加Access-Control-Allow-Origin字段，并返回正确的结果
除了上面提到的Access-Control-Allow-Origin字段之外，还有以下两个字段也可以用于描述CORS返回结果：
Access-Control-Allow-Credentials：用户是否可以发送、处理cookie
Acc-Control-Expose-Headers：可以让用户拿到的字段
Cache-Control、Content-Language、Content-type、Expires、Last-Modified、Pragma这些字段无论设置与否都可以拿到。

非简单请求

非简单请求的跨域请求，浏览器会在真实请求之前向服务器发送一个OPTION 请求，也就是预检请求。预检请求会将真实请求中的请求方法、自定义头字段和源信息添加到HTTP头信息字段中，询问服务器是否允许。
比如这样的一个GET请求：

OPTION：/test  HTTP/1.1
origin：http://www.test.com
Access-Control-Request-Method：GET
Access-Control-Request-Headers：X-Custom-Header
Host：www.test.com

服务器收到请求之后，依次对origin、Access-Control-Request-Method、Access-Control-Request-Header进行验证，验证通过之后，会在HTTP头信息中添加以下信息：

Access-Control-Allow-Origin：http://www.test.com
Access-Control-Allow-Method：GET,POST,PUT,DELETE
Access-Control-Allow-Credentials：X-Cusotom-Header
Access-Control-Max-Age：168000

CORS实现

在config包下创建一个类实现WebMvcConfigurer接口，配置已上所述字段即可。

public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")//允许跨域访问的路径
                .allowedOrigins("*")//允许跨域访问的源
                .allowedMethods("POST","GET","PUT","OPTIONS","DELETE")//请求方法
                .maxAge(168000)//预检间隔时间
                .allowedHeaders("*")//允许头部设置
                .allowCredentials(true);//是否发送cooki
    }
}

完成已上操作之后就可以支持跨域操作啦