013-CORS跨域介绍

跨域的同源策略

协议（protocol）、域名（host）、端口号（port），都相同称为同源，其中一个不同都会产生跨域问题。
在跨域情况下，cookie、localStorage等，后端的session等每次请求都不一样，如果你在跨域情况下使用这些对象将会有很多问题。比如无法通过ajax访问后端接口，无法使用session来做接口认证等等。

跨域的解决办法

jsonp：简单适用，兼容性好（可以兼容低版本IE），只支持 get 请求，不支持 post 请求，数据安全性较低。
CORS 跨域资源共享（Cross-Origin Resource Sharing）：W3C 标准，目前处理跨域问题的首选方式。
服务器配置：比如使用nginx的反向代理，讲不同源的地址映射为同源的url地址以达到前端js请求接口的同源要求。在很多情况下这也是很多项目解决跨域问题的主要选择。

CORS基本原理简单解释

CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求

同时满足以下两大条件，才属于简单请求

请求方法是以下三种方法之一
HEAD、GET、 POST
HTTP 的头信息不超出以下几种字段
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

注：也就是说我们最常用的 Content-Type：application/json 不是简单请求。

非简单请求

非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为“预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
“预检”请求就是使用的OPTIONS方法。

CORS跨域的请求头

Origin：请求来源字段
Access-Control-Request-Method：请求用到哪些http方法
Access-Control-Request-Headers：指定浏览器 CORS 请求会额外发送的头信息字段，如X-Token

CORS跨域的几个响应头说明 1. Access-Control-Allow-Origin

跨域是必须设置的，它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。Origin字段是浏览器在请求时会自动添加的，表示本次请求来自哪个域（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

注：如果要发送 cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，cookie 依然遵循同源政策，只有用服务器域名设置的 cookie 才会上传，其他域名的 cookie 并不会上传，且（跨域）原网页代码中的document.cookie也无法读取服务器域名下的 cookie。

Access-Control-Allow-Origin: * 
(为*时就不能发送cookie，也就是Access-Control-Allow-Credentials不能为true)
或者
Access-Control-Allow-Origin: http://localhost:8080

2. Access-Control-Allow-Credentials

CORS 请求默认不包含 cookie 信息（以及 HTTP 认证信息等）。比如你使用session或者cookie来做用户认证，那么就需要做如下两个配置。

第一步：后端配置Access-Control-Allow-Credentials属性为true

Access-Control-Allow-Credentials: true

第二步：前端配置withCredentials属性为true

注：前端配置withCredentials属性根据你使用的ajax工具来设置

ajax 设置

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

axios

axios.defaults.withCredentials=true
axios.defaults.crossDomain=true

以上至是提供一个设置的实例，axios还有其他地方可以设置withCredentials属性

JQuery

$.ajax({
    url: "http://localhost:8080/aaaa",
     type: "GET",
     xhrFields: {
         withCredentials: true
     },
     crossDomain: true,
     success: function (data) {
         
     }
 });

3. Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。在此有效期内，不用发送“预检”请求。

4. Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在“预检”中请求的字段。

Access-Control-Allow-Headers：Content-Type, X-Requested-With, X-authentication, X-client, X-Token, X_Requested_With

5. Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次“预检”请求。

Access-Control-Allow-Methods: GET,POST,DELETE,PUT,OPTIONS

上一篇：Spring MVC 异常处理源码解析
下一篇：Spring MVC处理CORS跨域

013-CORS跨域介绍

Linux相关栏目本月热门文章