浅谈CORS跨域

常见问题：

Access to XMLHttpRequest at 'http://xxxxxx' from origin 'http://xxxxxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

一、什么是CORS跨域？

        跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

        因为安全的原因，浏览器优先在 JavaScript 中限制了跨域的 HTTP 请求。`XMLHttpRequest`和`fetch`遵循同源策略，这意味着一个web应用在使用这些 API 的时候只能够向同源的服务获取资源，除非另外一个源包含了正确的 CORS 头部。

注意：

• CORS 的行为不是一种错误，而是为了保护用户的一种安全机制

• CORS 被设计用来阻止某些怀有恶意的网站，当用户无意中访问它们的时候会发出请求去合法的网站读取用户信息或者执行违背用户意愿的操作。

---

二、为什么会出现跨域问题？

XmlHttpRequest同源策略：禁止不同源的AJAX请求，主要用来防止CSRF攻击

• 什么是跨域请求
  浏览器同源策略的限制(访问同源的资源是被浏览器允许的，但是如果访问不同源的资源，浏览器默认不允许。访问不同源的资源就叫做跨域)
• 什么是同源策略（Same Origin Policy)?
  同源策略，是浏览器的一种核心最基本的安全策略。它对来之不同远的文档或脚本对当前文档的读写操作做了限制。同源，即协议相同，域名相同，端口相同
• 为什么会有跨域问题
  跨域问题只出现在浏览器访问的页面，因为这是浏览器为了保户用户安全而制造的策略。假如没有这层保护，网站就很容易受到跨站伪造请求（CSRF）的攻击。

---

三、如何解决跨域限制？

CORS（跨资源共享- Cross-origin resource sharing)
CORS 是W3C推荐的一种官方方案，能使服务器支持XmlHttpRequest的跨域请求。CORS只需要添加一些HTTP头，让服务器声明允许的访问来源。

3.1 使用CORS时，异步请求会被分为简单请求和非简单请求

• 简单请求需要满足以下两大条件，反之则是非简单请求：

请求方法是以下三种之一：

• HEAD
• GET
• POST

HTTP 的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-type:只限于3个值application/x-www-from-urlencoded、multipart/from-data、text/plain

• 简单请求

        对于简单请求，浏览器直接发出CORS请求。在头信息中自动添加一个Origin字段（本次请求来自哪个源：协议+域名+端口），服务器根据这个值，决定是否同意这次请求。
        如果Origin指定的源，不在许可范围内，服务器返回一个正常的HTTP回应。头信息中没有包含Access-Control-Allow-Origin字段，便会抛出错误：被XMLHttpRequest的onerror回调函数捕获。
        如果Origin指定的源在许可范围内，服务器会返回的响应会多出：

 Access-Control-Allow-Origin: http://api.XXX.com
 Access-Control-Allow-Credentials: true
 Access-Control-Expose-Headers: FooBar
 Content-Type: text/html; charset=utf-8

Access-Control-Allow-Origin: 请求字段为时，表示接受任意域名的请求（如果需要cookie时，不能设置为）
Access-Control-Allow-Credentials： 该字段可选，是一个布尔值，表示是否发送Cookie,默认为false
Access-Control-Expose-Headers: 该字段可选，可选值有：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma

• 非简单请求

         非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
        非简单请求之前，会增加一次HTTP查询请求，称为“预检”请求。
        浏览器先询问服务器，当前网页所在域名是否在服务器许可名单中，以及可以使用哪些HTTP动词和头信息字段，只有得到肯定的答复，浏览器才会发出XMLHttpRequest请求。

var url = 'http://api.aaa.com/a';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

        上面这段代码中，HTTP的请求方式是PUT，并且发送一个自定义头信息X-Custom-Header。浏览器发现这是一次非简单请求，就自动发出“预检”请求，要求服务器确认可以这样请求，"预检"请求的头信息:

OPTIONS /cors HTTP/1.1
Origin: http://api.bbb.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.aaa.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"预检"请求方法是OPTIONS，表示这个请求是用来询问的，头信息里边的关键字Origin表示来源。
Access-Control-Request-Method： 该字段是必须的，用来列出浏览器的CORS会用到哪些HTTP方法。
Access-Control-Request-Headers： 指定浏览器CORS请求会额外发送的头信息字段，如’token‘,'equipment'

"预检"请求的回应（检查Origin、Access-Control-Request-Method、Access-Control-Request-Headers后）

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

浏览器的正常请求和回应

浏览器：

PUT /a HTTP/1.1
Origin: http://api.bbb.com
Host: api.aaa.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

服务器：

Access-Control-Allow-Origin: http://api.bbb.com
Content-Type: text/html; charset=utf-8

3.2 JSONP

        可以在js中绕过同源策略，并发起跨域HTTP请求的使用模式。同源策略有一个显著的例外，HTML脚本元素可以规避SOP检查，所以我们可以通过script标签动态注入脚本向其他源发送请求。

 存在一定的局限性：

• JSONP只适用于http的get请求。
• JSONP缺乏错误处理机制，如果动态注入脚本成功，就会执行回调函数，如果错误，没有任何提示信息；即当遇到4，5等错误的时候，没法找到错误的原因；
• 在安全方面，借助JSONP有可能进行跨站请求伪造(CSRF)攻击，当一个恶意网站使用访问者的浏览器向服务器发送请求并进行数据变更时，被称为CSRF攻击。由于请求会携带cookie信息，服务器会认为是用户自己想要提交表单或者发送请求，而得到用户的一些隐私数据

---