IE8、9 下的资源跨域请求

icecity1306 2015-09-17

展开全文

Web 浏览器具有一个称为相同站点源策略的安全策略，此策略可阻止网页访问另一个域中的数据。网站通常会让其服务器在后端请求其他站点服务器中的内容，由此避开浏览器中的检查，从而绕开此策略。

关于同源策略或者是跨域请求的概念，可以先读我的前一篇文章：同源策略——浏览器的安全卫士

不同源的资源读取带来了方便，也带来了弊端。作为开发者也不得不做出一些妥协的事情。实际上 IE 7、8、9、10 对于跨域ajax 是默认不支持的。
我在http:///#search=cors 中搜索 cors 得到以下的结果。

浏览器的支持程度

IE 10 以下的支持都是很糟糕的，如果你一定要开启，那就按照很多网友说的方法试一下，

解决方法如下：点击IE浏览器的的“工具->Internet 选项->安全->自定义级别”将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”，点击确定就可以了。

但是作为一个普通用户，谁知道这么设置呢？所以，必须从代码层面上解决这个问题。

在 stackoverflow 中有一个问题， IE9 jQuery AJAX with CORS returns “Access is denied”

This is a known bug with jQuery. The jQuery team has "no plans to support this in core and is better suited as a plugin." (See this comment). IE does not use the XMLHttpRequest, but an alternative object named XDomainRequest.

解决办法——XDomainRequest

通过使用 Internet Explorer 8 中的跨域请求（缩写为“XDR”），开发人员可以创建跨网站数据聚合方案。这个名为XDomainRequest 的请求与 XMLHttpRequest 对象类似，但编程模型更加简单，它可以提供一种最简单的方式来向支持 XDR 的第三方站点发出匿名请求，并选择使这些站点的数据可跨域使用。只需三行代码即可生成基本的跨站点请求。这将确保针对公共站点（例如，博客或其他社交网络应用程序）的数据聚合简单、安全和快速。

跨域请求需要经过网页和服务器的相互同意。通过利用 window 对象创建 XDomainRequest 对象，并打开到特定域的连接，可以在网页中启动一个跨域请求。浏览器将通过发送带有源值的 Origin 标头，从特定域的服务器中请求数据。如果服务器响应的 Access-Control-Allow-Origin 标头为 * 或请求页面的确切 URL，则浏览器将仅仅完成连接。此行为是万维网联盟 (W3C) 的 Web 应用程序工作组制定的、针对与 XDomainRequest 对象集成的客户端跨域通信的草稿框架的一部分。

更优雅的解决办法

jQuery-ajaxTransport-XDomainRequest

这是一个基于 XDomainRequest 实现 jquery ajxa 的 jquery 插件，为了支持 IE8、9的cors。

demo

$.getJSON('http://jsonmoon./').done(function(data) {
  console.log(data.name.first);
});

// POST
$.ajax({
  url: 'http://frozen-woodland-5503./cors.json',
  data: 'this is data being posted to the server',
  contentType: 'text/plain',
  type: 'POST',
  dataType: 'json'
}).done(function(data) {
  console.log(data.name.last);
});

注意

为了在IE 浏览器中使用 XDomainRequest，以下是必须的，

Only GET or POSTWhen POSTing, the data will always be sent with a Content-Type of text/plain
Only HTTP or HTTPS Protocol must be the same scheme as the calling page
Always asynchronous