天天看点
返回

CORS跨域资源共享 详解

1. CORS：全称 Cross-Origin Resource Sharing，它允许浏览器向跨域服务器发送 XMLHttpRequest 请求，克服了 Ajax 只能同源请求的限制.【在这里可能你会见到跨域或跨源两种说法，两者并无区别】

2. CORS简介： 需要浏览器和服务器同时支持，CORS 的通信过程，全程由浏览器实现，不需要我们去进行任何操作，因此对于开发者来说，我们学习 CORS 只是为了弄清楚其原理，而非应用于实践工程。当我们希望发送跨域请求时，代码和同源 Ajax 请求的代码完全一致。浏览器会在你发送跨域资源请求时，自动为请求头部添加一些信息，当进行非简单请求【下面会介绍】时，还会额外发送一次预检请求. 因此我们了解到，当我们发送跨域请求，浏览器帮我们做了该做的事情，关键是服务器是否允许我们跨域请求，只要服务器实现了 CORS 接口，我们就可以实现跨域请求.

简单复习一下：什么是跨域请求？当你希望请求的页面的 协议、域名以及端口号 有任何一个和你发送请求所在的页面的 协议、域名以及端口号 对应不上时，就是跨域请求.

3. 跨域请求被分为两类：

【1】简单请求：需要满足两大条件：（1）请求方法属于以下三种之一：GET、POST、HEAD

（2）HTTP 的头信息不超出以下字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值

    application/x-www-form-urlencoded

     、

    multipart/form-data

    text/plain

【2】非简单请求：不满足简单请求条件的即为非简单请求.

4. 简单请求详解：

【1】对于简单请求，浏览器直接发送 CORS 请求，在头信息中添加一个 Origin 字段，如下例【转自 阮一峰 博客，仅作为个人学习使用】

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

Origin 字段用于说明发送请求所在页面的源（协议 + 域名 + 端口号），服务器会检查这个源信息，决定是否同意这次请求。

举个例子来说就是：比如你去访问百度，百度会收到你的源信息，如果你的源符合要求，那百度就允许你访问，如果你的源信息不合法或者有危险，那么百度就不允许你访问。

（1）如果说 Origin 指定的源不在许可范围内，也就是说服务器不允许此次跨域请求，那么服务器会返回一个正常的 HTTP 回应，这个回应的头信息不包括 Access-Control-Allow-Origin 字段，浏览器找不到这个字段就会报错通过 XMLHttpRequest 对象的 onerror 回调函数捕获，注意这种错误无法被状态码识别，因为可能返回 200 状态码.

（2）如果说 Origin 指定的源在许可范围内，那么返回的 HTTP 响应会多出几个头信息字段：

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

※ 1. Access-Control-Allow-Origin：该字段是必须的，它的值要么是请求时 Origin 的值，要么是星号 * ，代表允许所有源请求.

※ 2. Access-Control-Allow-Credentials：字段可选，表示是否允许发送 Cookie，默认情况，Cookie 不包括在 CORS 请求，设为 true，则表示允许携带 Cookie 请求.

※ 3. Access-Control-Expose-Headers：字段可选，CORS 请求时，getResponseHeader() 方法只能拿到 6 个基本字段，如果希望获取其他字段，需要在此字段中指定，如上面代码示例中的 FooBar，getResponseHeader('FooBar') 可以返回 FooBar 字段的值。

【凭据请求】

对于 Access-Control-Allow-Credentials ，它的作用是使得 CORS 请求可以携带 Cookie 信息，但这是服务器方同意，用户在 Ajax 请求时也必须设置 withCredentials 属性值为 true，否则浏览器不会发送Cookie.

 5. 非简单请求详解：

【1】预检请求：浏览器会先询问服务器当前网页所在的源是否在服务器的许可范围，以及可以使用哪些 HTTP 请求方式，只有得到肯定答复，浏览器才会发出正式请求.

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

预检请求的请求方式是 OPTIONS，Origin 字段表示请求来自哪个源，除此之外还有两个重要的字段：

（1）Access-Control-Request-Method：该字段是必须的，表示 CORS 正式请求的请求方式.

（2）Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器 CORS 请求会额外发送的头信息字段，上例是 

X-Custom-Header

【2】服务器收到预检请求后，检查 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

在回应中，关键的字段是 Access-Control-Allow-Origin 字段，表示源可以进行请求访问。

（1）如果服务器否定了预检请求，那么会正常返回一个 HTTP 回应，不会添加 CORS 相关头信息字段，那么浏览器可以通过 XMLHttpRequest 对象的 onerror 回调函数捕获.

（2）如果服务器通过预检请求，会在响应中添加 CORS 相关头部信息：

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000      
（1）Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
（2）Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
（3）Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求.

【3】预检请求完成后，进行正常的请求，过程和简单请求一样。

部分内容摘自 阮一峰老师的博客 http://www.ruanyifeng.com/blog/2016/04/cors.html

字段 服务器 跨域请求 百度 信息字段
上一篇: 跨域资源共享 CORS 详解
下一篇: CORS跨域资源共享总结

继续阅读