所以，这里安利一下 Nicholas Zakas 大神写的一个函数.(我把英文改为中文了)
function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // 检查xhr是否含有withCredentials属性 //withCredentials 只存在于XHR2对象中. xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined") { // 检查是否是IE，并且使用IE的XDomainRequest xhr = new XDomainRequest(); xhr.open(method, url); } else { // 否则..基本上就不能跨域了 xhr = null; } return xhr; }
然后, 就可以直接，xhr.send(body). 那CORS其实就完成了.
但, withCredentials 是什么意思呢?
CORS中的withCredentials
该属性就是用来表明，你的request的时候，是否带上你的cookie. 默认情况下是不带的. 如果你要发送cookie给server的话, 就需要将withCredentials设置为true了.
xhr.withCredentials = true;但是,server并不是随便就能接受并返回新的cookie给你的。 在server端,还需要设置.
Access-Control-Allow-Credentials: true 这样server才能返回新的cookie给你. 不过，这还有一个问题,就是cookie还是遵循same-origin policy的。 所以, 你无法使用document.cookie去访问他. 他的CRUD(增删查改)只能由 server控制.
CORS 的preflight 验证
CORS的preflight request, 应该算是CORS中里面 巨坑的一个。 因为在使用CORS 的时候， 有时候我命名只发送一次请求，但是,结果出来了两个。 有时候又只有一个, 这时候, 我就想问，还有谁能不懵逼.
这里，我们就需要区分一下. preflight request的作用到底是什么。
preflight request 是为了, 更好节省宽带而设计的. 因为CORS 要求的网络质量更高, 而且 花费的时间也更多. 万一, 你发送一个PUT 请求(这个不常见吧). 但是服务端又不支持, 那么你这次的 请求是失败了， 浪费资源还不说，关键用户不能忍呀~
所以, 这里我们就需要区分，什么是简单请求, 什么是比较复杂的请求
简单请求
简单请求的内容其实就两块, 一块是method 一块是Header
Method
GET
POST
Header
Accept
Accept-Language
Content-Language
Last-Event-ID //这是SSE的请求头
Content-Type ,但只有一下头才能算简单
application/x-www-form-urlencoded
multipart/form-data
text/plain
比如, 我使用上面定义好的函数createCORSRequest. 来发送一个简单请求
var url = ''; var xhr = createCORSRequest('GET', url); xhr.send();我们来看一下，只发送一次简单请求时，请求头和相应头各是什么.（剔除无关的Headers）
//Request Headers POST HTTP/1.1 Origin: Host: api.bob.com //Response Headers Access-Control-Allow-Origin: Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: Vary Content-Type: text/html; charset=utf-8
上面就是一个简单的CORS 头的交互。 另外，说明一个 Access-Control-Allow-Origin ,该头是必不可少的.
本来在XHR中, 一般可以通过xhr.getResponseHeader()来获取相关的相应头。 但是 在CORS中一般可以获得如下几个简单的Header:
Cache-Control
Content-Language
Content-Type
Expires
ETag
Last-Modified
Pragma
如果你想暴露更多的头给用户的话就可以使用, Access-Control-Expose-Headers 来进行设置. 多个值用','分隔.
那发送两次请求是什么情况呢?
我们如果请求的数据是application/json的话，就会发送两次请求.
var url = ''; var xhr = createCORSRequest('POST', url); xhr.setRequestHeader('Content-Type','application/json'); xhr.send();第一次,我们通常叫做preflight req. 他其实并没有发送任何 data过去. 只是将本次需要发送的请求头发送过去, 用来验证该次CORS请求是否有效.上面的请求头就有:
OPTIONS HTTP/1.1 Origin: Content-Type: application/json Access-Control-Request-Method: POST Access-Control-Request-Headers: Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive
Access-Control-Request-Method 就是用来表明,该次请求的方法.
请求内没有任何附加的数据.
如果该次preflight req 服务器可以处理，那么服务器就会正常返回, 如下的几个头.
//Response Header <= HTTP/1.1 204 No Content Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Max-Age: 86400 Access-Control-Allow-Headers: Custom-Header Access-Control-Allow-Origin: Content-Length: 0说明一下里面的头
Access-Control-Allow-Methods: 指明服务器支持的方法
Access-Control-Max-Age: 表明该次preflight req 最长的生存周期
Access-Control-Allow-Headers: 是否支持你自定义的头. 比如: Custom-Header
这里，主要要看一下 Access-Control-Max-Age . 这和preflight另外一个机制有很大的关系. 因为preflight 已经多发了一次请求， 如果每次发送json格式的ajax的话， 那我不是每次都需要验证一次吗？
当然不是. preflight req 有自己的一套机制. 通过设置Max-Age 来表示该次prefilght req 的有效时间。 在该有效时间之内， 后面如果有其他复杂ajax 的跨域请求的话，就不需要进行两次发送验证了.
而且，第二次的请求头和相应头 还可以减少不少重复的Header.
相关文章
精彩导读
热门资讯
关注我们
