【SpringBoot教程】SpringBoot 实现前后端分离的跨域访问（CORS）

作者简介：大家好，我是撸代码的羊驼，前阿里巴巴架构师，现某互联网公司CTO

联系v：sulny_ann（17362204968），加我进群，大家一起学习，一起进步，一起对抗互联网寒冬

# 序言

跨域资源共享向来都是热门的需求，使用CORS可以帮助我们快速实现跨域访问，只需在服务端进行授权即可，无需在前端添加额外设置，比传统的JSONP跨域更安全和便捷。

一、基本介绍

简单来说，CORS是一种访问机制，英文全称是Cross-Origin Resource Sharing，即我们常说的跨域资源共享，通过在服务器端设置响应头，把发起跨域的原始域名添加到Access-Control-Allow-Origin 即可。

1. CORS工作原理

CORS实现跨域访问并不是一蹴而就的，需要借助浏览器的支持，从原理题图我们可以清楚看到，简单的请求（通常指GET/POST/HEAD方式，并没有去增加额外的请求头信息）直接创建了跨域请求的XHR对象，而复杂的请求则要求先发送一个"预检"请求，待服务器批准后才能真正发起跨域访问请求。

来自维基百科

根据官方文档W3C规范-CORS 的描述，目前CORS使用了如下头部信息：

2. Request Headers（请求头）

温馨提示：Request Headers 无需人为干预，因为浏览器会自动识别跨域请求并添加对应的请求头。

• Origin 表示发起跨域请求的原始域。

• Access-Control-Request-Method 表示发起跨域请求的方式，例如GET/POST。

• Access-Control-Request-Headers表示发起跨域请求的额外头信息。

3. Response headers（响应头 ）

温馨提示：Response Headers 需要人为干预，通过设置响应头以帮助服务器资源进行跨域授权，例如允许哪些原始域进行跨域请求，是否允许响应信息携带Cookie等认证信息。

• Access-Control-Allow-Origin 表示允许哪些原始域进行跨域访问。

• Access-Control-Allow-Credentials表示是否允许客户端获取用户凭据。

使用场景：例如现在需要登录系统后才能发起跨域请求，并且要附带Cookie信息给服务器。则必须具备两个条件：

1. 浏览器端：发送AJAX请求前需设置通信对象XHR的withCredentials 属性为true。

2.服务器端：设置Access-Control-Allow-Credentials为true。两个条件缺一不可，否则即使服务器同意发送Cookie，浏览器也无法获取。

正确姿势如下：

$.ajax({
      url: 'localhost:8080',    xhrFields: {
          withCredentials: true //表示发起跨域访问并要求携带Cookie等认证信息    },    success: function (r) {
          console.log(r)    }});

有好奇的小伙伴可能会问为什么在W3C手册中找不到跨域属性xhrFields的描述，因为该属性并不是通信对象XHR的