[HTTP趣谈]支持跨域及相关cookie设置

如今“前后端分离”的设计思想已经非常普及，所以一旦静态资源和后台应用部署在不同服务器上并采用不同域名，那么，必然会遇到“浏览器同源策略”的限制，也必然，需要前后台一起合作解决跨域问题。

1. 同源策略

什么样的URL是同源的？其必须满足下面三个条件：

• 协议号相同
• 域名相同
• 端口相同

比如，a.com网站，想要访问b.com网站api，比如api.b.com。那么，在“同源策略”限制下，a.com网站无法获取api.b.com下的cookie，也无法向api.b.com发送ajax请求。

2. 如何支持跨域

最简单的方式是后台服务器将允许跨域访问的URL添加到白名单中，这样，前台应用不需要做任何特殊处理。

另外，还有两种常用方法：

1) JSONP

基本思想为：网页通过添加一个

用JSONP，浏览器会自动在request header里面带上a.com下的cookie信息。
其实，通过src调用api都是GET方式，类似请求资源文件，必须明确，从Web页面产生的文件请求都会带上cookie。

因此，JSONP的缺点很明显了：

• 只支持GET请求
• 只能带本域下的cookies

2) CORS（Cross-origin resource sharing）

CORS是一个W3C标准，全称是"跨域资源共享"。它运行浏览器向跨域服务器发送AJAX请求。

小贴士

IE10以上用XMLHttpRequest对象实现CORS；
IE8，IE9用XDomainRequest支持CORS。

整个CORS跨域，是浏览器自动完成，不需要前端特殊处理。浏览器一旦发现是AJAX请求跨域，会添加origin头信息，后台应用需要根据request header中的origin/referer，来设置正确的response header，完成跨域请求。

cors.png

CORS具体的概念和讲解，网上很多资料，包括什么是简单请求和“Preflighted”，请参考 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

下面要重点提到的是，CORS下，前端如何携带cookies?

Requests with credentials

用JS/JQuery启动AJAX请求时，必须设置withCredentials头为true，写法如下：

JS:
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('POST', ‘a.com’, true);
xhr.send();

JQuery:
$.ajax({
  url: a_cross_domain_url,
  xhrFields: {
    withCredentials: true
  }
});

这时，后台设置response header时，需要返回：

Access-Control-Allow-Credentials: true;
Access-Control-Allow-Origin: a.com; //必须为具体域名，不能是*

重点需要注意的是cookies信息！！！这时，request请求中可以携带的cookies，不仅仅有本域下的cookies，还包括跨域服务器下设置的cookies（注意：跨域服务器下的cookies，是无法通过JS代码document.cookie访问，该cookies只能被远程服务器控制）。

可见，在安全性上，CORS比JSONP强悍很多！

CORS缺点是，低版本的IE浏览器支持不好。

3. 小结

针对iframe，还有些特殊的解决跨域方式，比如HTML5新特性：postMessage。
如果父子窗口是同一个主域，不同子域，也可以通过设置document.domain属性，规避同源策略。

---

更多高阶内容，可移步前端网络高级篇（四）CORS 跨域。