关于 CORS —— 小船翻在了 IE8 的小沟沟里

如今使用 CORS 技术做跨域通信已经不是什么新鲜事情了，我们网页中的很多接口在跨域方案上也首选 CORS。然而 CORS 看似完美的背后，却有值得我们注意的地方。

我们团队在开发新需求的时候，测试 MM 发现 IE8 下网页中的一个 CORS 接口返回异常，提示没有权限，排查这个问题的过程中加深了我们对 IE 实现 CORS 技术的认知。

CORS 是什么

网上已经有太多的篇幅描述 CORS 是什么，这里简单介绍一下。CORS 技术就是为了实现跨域请求，而在响应头中设置一些 CORS 技术规定的响应头，如 Access-Control-Allow-Origin 等用以实现客户端与服务端进行跨域通信。

通常一个简单的 CORS 响应头组成有如下内容：

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: http://www.yixun.com

CORS 方案的 HTTP 请求是不会携带 cookie 的，如果需要带上 cookie，需要在响应头中多添加一些字段：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:withCredentials

同时客户端在请求头中需要设置字段 withCredentials 为 true。

withCredentials: true

*允许带 cookie 时，Access-Control-Allow-Origin 字段值不可以设置为 ``。**

为什么选择 CORS 方案

CORS 方案较之于传统的方案优点很多。

相比 JSONP，CORS 可以使用 POST 方式提交数据就完败了 JSONP 方案；
相比 document.domain 方案，CORS 方案的响应内容没有格式限制，而 document.domain 方案不仅需要设置 document.domain，还需要借助 iframe 元素接受带有指定格式的返回数据，方案比较繁琐；
window.postMessage 方案和上述的 document.domain 方案基本类似，不仅需要对接口的返回数据进行特别处理，还需要使用一个 iframe 元素进行接受。

总结下来，选择 CORS 跨域方案最大的好处是返回数据可以在跨域与同域时完美兼容，不需要接口多处理不同情况下的返回数据格式，前端实现也十分简单方便。

IE8 下为什么请求提示没有权限？

返回文章起首提到的问题，请求接口提示没有权限。但是在 Chrome、Firefox 中确认接口是正确添加了 CORS 需要的响应头字段了。

后来在爆栈上搜索发现，原来 IE8\9 实现 CORS 的对象和实现 AJAX 的对象（XMLHTTP）不是同一个，而是使用了 window.XDomainRequest 对象。

由于我们的 PC 站使用的 jQuery 版本太低（5.1版），$.ajax 方法没有兼容 IE8\9 的 XDomainRequest 对象，于是网页使用了 XMLHTTP 对接口发起请求，所以会返回“没有权限”的提示。为了兼容这个情况，我们做了一些手动的兼容：

if (/*判断是否跨域*/ && window.XDomainRequest) {
  var xdr = new XDomainRequest()
  xdr.open('post', url)
  xdr.onload = function() {
    //success(xdr.responseText);
  }
  xdr.send()
} else {
  $.ajax(...)
}

在 IE8/9 下使用 XDomainRequest 进行跨域时还有一些限制：

无法设置请求头中的自定义字段；
无法携带 cookie 。

在有上述两项需求并需要兼容 IE8\9 时，CORS 方案就无法满足我们的需求了，需要定制另外的跨域方案。于是我们有部分接口只能通过修改接口将需要的 cookie 值放在请求的 query string 中或者采用其他的跨域方案解决问题。

扩展阅读

document.domain 跨域方案

当仅二级域名不同时，通过两个页面设置相同的主域名，比如

//base.yixun.com
document.domain = 'yixun.com'

就可以互相通信。接口可以通过 form 元素的 target 属性指定提交至一个 iframe 元素中，接口中返回带有格式的数据，如：

<!--接口的返回数据-->
<script>
document.domain = 'yixun.com'
frameElement.callback(...) // frameElement 即 iframe 元素本身，callback 方法在父页面中定义
</script>

iframe 元素得到了一个 script 标签并执行，而 iframe 元素的 callback 预先已经定义好：

ifr = document.getElementById(...) //获取 iframe 元素
ifr.callback = function (d) { //定义 iframe 元素的 callback 方法
  success(d)
  this.src = 'about:blank' //避免页面刷新重复提交
}

postMessage 方案和 document.domain 原理相似，就不再赘述。

YIXUNFE / blog