当我们在www.a.com这个域下用ajax提交一个请求到www.b.com这个域的时候,默认情况下,浏览器是不允许的,因为违反了浏览器的同源策略。解决方案可以参考笔者的这篇博文:http://www.cnblogs.com/anai/p/4227157.html
这里要讨论的是跨域中遇到的另一个问题,就是当提交一个请求到www.b.com这个域时,后台尝试在响应中绑定cookie信息,以告知浏览器去保存这个cookie,但是默认情况下,浏览器是不会去为你创建cookie的,具体现象就是你发现在响应中已经有set-cookie的响应头了并且有值,而且浏览器也会有信息显示已接收到cookie了,但是就是在cookie中找不到。没错,该现象就是因为你是跨域提交的创建cookie的请求。那么如果我们非要浏览器去创建这个cookie怎么办呢?这里就要使用到一个xmlHttpRequest对象的属性xhrFields,官方文档的解释如下:
A map of fieldName-fieldValue pairs to set on the native XHR
object. For example, you can use it to setwithCredentials
to true
for cross-domain requests if needed.
意思就是该属性是一个用来配置xhr对象的键值对,比如你可以在跨域请求有需要的时候设置withCredentials:true
那么withCredentials:true是什么意思?
该属性是告诉浏览器,1、允许创建来自不同域的cookie信息;2、每次的跨域请求都允许带上该cookie信息
该配置项还需要后台的允许才有效,后台如果允许浏览器发送带凭据的请求,那么会在响应头中带上"Access-Control-ALLOW-Credentials",值为"true"。
如果不加此响应头,浏览器将获取不到服务端的响应体。
好了,到此我们已经知道怎么跨域创建cookies,并在每次的跨域请求中带上cookies了,简单的说就是前台要配置一个ajax参数:xhrFields:{withCredentials:true},有的资料上说还要设置crossDomain:true,但是笔者测试好像不需要;后台要在响应头中绑定"Access-Control-ALLOW-Credentials",值为"true"。