学习CORS之前，先看下如下问题，作为铺垫和准备。
问题1: 什么是跨域？
浏览器对于javascript的同源策略的限制。
出于安全考虑，浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。 具体而言，Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。
例如a.com下面的js不能调用b.com中的js对象或数据（因为a.com和b.com是不同域），所以跨域就出现了。
跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。
注意：一个域名的JS ，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。
问题2: 什么是同源策略？
请求的url地址，必须与浏览器上的url地址处于同域上，也就是域名，端口，协议都必须相同。
问题3: 为什么要有跨域限制？
AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：
- 用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的cookie中添加用户标识。
- 用户浏览了恶意页面 http://evil.com 。执行了页面中的恶意AJAX请求代码。
- http://evil.com 向http://mybank.com 发起AJAX HTTP请求，请求会默认把http://mybank.com 对应cookie也同时发送过去。
- 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
- 而且由于Ajax在后台执行，用户无法感知这一过程
问题4:为什么表单请求可以跨域
A页面（域名A）用 form 提交表单到B页面（域名B），A页面的脚本无法获取B页面中的内容，无法获得响应，浏览器认为是安全的。
其实，请求已经发送出去了，只是拿不到响应而已，AJAX 接收方可以读取响应内容的。所以，利用这个特性，依然有可能发起CSRF攻击。
问题5: 如何解决跨域问题？
-
方式一：jsonp
浏览器对资源文件的请求不限制同源，比如a.com下的页面可以通过标签<script src="b.com/b.js">, <img src="b.com/b.png"/>引入b.com域名下的JavaScript文件或者图片。
jsonp就是动态创建script标签，然后利用src属性进行跨域的。
// 定义一个fun函数
function foo (data) {
console.log(data);
};
// 创建一个脚本，并且告诉后端回调函数名叫foo
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=foo';
body.appendChild(script);
服务器接收到请求完成操作后，会调用callback函数（执行foo）。
jsonp的缺点是：只能发起GET请求。因为，请求资源文件默认都是GET请求。
-
方式二：服务器代理
客户端发起请求到同源的代理服务器，然后代理服务器再将请求转发给真正的服务器。常见利用Node.js作为代理服务器。 -
方式三：document.domain来跨子域（不常用）
对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域。这种方式非常适用于iframe。比如a页面地址为 http://a.yourhost.com，b页面为 http://b.yourhost.com。 这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。之后，就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。 -
方式四：postMessage实现页面之间通信（不常用）
window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。 -
方式五：websocket
Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。 - 方式五：CORS跨域
下面，详细讲解CORS跨域。
CORS(Cross-Origin Resource Sharing)
隶属于 W3C 的 Web 应用工作组( Web Applications Working Group )推荐了一种新的机制，即跨源资源共享（Cross-Origin Resource Sharing (CORS)）。这种机制让Web应用服务器能支持跨站访问控制，从而使得安全地进行跨站数据传输成为可能。
CORS 请求头
CORS的请求有个明显标示，response header里面带有Access-Control-Allow-Origin字段。
Access-Control-Allow-Origin: <origin> | *
origin参数指定一个允许向该服务器提交请求的URI。对于一个不带有credentials的请求，可以指定为'*'，表示允许来自所有域的请求。
还可以指定具体的域，比如:
Access-Control-Allow-Origin: http://mozilla.com
如果服务器端指定了域名，而不是'*'，那么请求头必须包含Origin。响应是根据请求头里的Origin的值来返回不同的内容的。
image
CORS的response里面还包含几个特殊的请求头：
-
access-control-allow-methods：支持的HTTP请求方法 -
access-control-allow-headers：支持的request header类型，包括自定义header。 -
access-control-allow-credentials：是否支持携带cookies（后面会详细讲解）
下面，我们具体分析下CORS支持的几种请求方式。
1. 简单请求
简单请求具备以下条件：
- 只使用 GET, HEAD 或者 POST 请求方法。
- 如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是
application/x-www-form-urlencoded,multipart/form-data或text/plain中的一种。 - 不使用自定义请求头（类似于 X-Modified 这种）。
image
如果服务器端仅允许来自 http://foo.example 的跨站请求，它可以返回：
Access-Control-Allow-Origin: http://foo.example
2. 预请求(Preflighted requests)
“预请求”要求必须先发送一个 OPTIONS 请求给目的站点，来查明这个跨站请求对于目的站点是不是安全可接受的。这样做，是因为跨站请求可能会对目的站点的数据造成破坏。 当请求具备以下条件，就会被当成预请求处理：
- 请求以 GET, HEAD 或者 POST 以外的方法发起请求。
- 使用 POST，但请求数据为
application/x-www-form-urlencoded,multipart/form-data或者text/plain以外的数据类型。比如说，用 POST 发送数据类型为application/xml或者text/xml的 XML 数据的请求。 - 使用自定义请求头（比如添加诸如 X-PINGOTHER）
发起OPTIONS请求
image
预检成功后发起GET请求
image
3. 3.附带凭证信息的请求(support cookies)
如果request请求要支持HTTP Cookies和验证信息，那么，XMLHttpRequest需要将withCredentials属性设置为true，而response需要返回Access-Control-Allow-Credentials: true。
image
前端代码如下：
// JS
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
function callOtherDomain(){
if(invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true; // 设置
invocation.onreadystatechange = handler;
invocation.send();
}
// JQuery
$.ajax({
...
url: a_cross_domain_url,
xhrFields: {
withCredentials: true
}
});
小结
目前最流行的跨域方式就是CORS了，需要服务端做相应配置，前端各类HTTP框架都支持了CORS机制。比如常用的axios库，可以通过全局配置指定CORS相关属性。
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
网友评论