IE8、9 下的资源跨域请求

作者: 流星狂飙 | 来源:发表于2015-09-09 10:53 被阅读7339次

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

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

不同源的资源读取带来了方便,也带来了弊端。作为开发者也不得不做出一些妥协的事情。 实际上 IE 7、8、9、10 对于跨域ajax 是默认不支持的。
我在http://caniuse.com/#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.jsapp.us/').done(function(data) {
  console.log(data.name.first);
});

// POST
$.ajax({
  url: 'http://frozen-woodland-5503.herokuapp.com/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,以下是必须的,

  1. Only GET or POSTWhen POSTing, the data will always be sent with a Content-Type of text/plain

  2. Only HTTP or HTTPS Protocol must be the same scheme as the calling page

  3. Always asynchronous

相关文章

  • IE8、9 下的资源跨域请求

    Web 浏览器具有一个称为相同站点源策略的安全策略,此策略可阻止网页访问另一个域中的数据。 网站通常会让其服务器在...

  • JavaScript第二十二章 跨域资源共享

    什么叫跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 资源跳转:...

  • 史上最全的javascript跨域解决方案

    什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 资源跳转: ...

  • 前端跨域整理

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里的跨域是广义的。 广义的跨域: 资源跳转...

  • 跨域

    什么是跨域? 跨域是指一个域下或者脚本试图去请求另一个域下的资源,这里是跨域的广义的。广义的跨域: 1、 资源跳转...

  • 前端常见跨域解决方案(全)

    什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转...

  • 跨域问题解决

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1、资源跳...

  • 前端常见跨域解决方案

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1、资源跳...

  • 跨域问题:好几种解决方案

    跨域分为广义跨域和狭义跨域 广义跨域:一个域下的文档或脚本试图去请求另一个域下的资源; 广义跨域可以分为以下几种:...

  • 跨域问题原因与解决方案 - 跨域系列

    什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源广义的跨域:1.) 资源跳转: A链接、重定向、...

网友评论

  • 0054b2815375:xdomin这个插件只支持get请求,ie上post请求参数发不出去,其实后端只要支出了cors ,jQuery.support.cors=true;就可以了
    半夜虾叫:post请求,一直说我传的参数为空,实际有值,jQuery.support.cors=true设置了,但是IE9以下,还是不能请求数据
  • 晗笑书生:为什么我的还是不行 axios 要兼容IE9 真心无语了
    果子煎饼同学:@晗笑书生 兄弟 你解决了吗 我也要兼容到ie9
  • 86c7d6e3b686:是不是掉了一句话:
    jQuery.support.cors = true;
  • Yaphets_123456:我就想问一下,为什么必须是异步的?感觉影响不是很大啊
  • d25949258ce4:公司项目大部分都是针对IE10以下的。各种不爽呀。

本文标题:IE8、9 下的资源跨域请求

本文链接:https://www.haomeiwen.com/subject/gweycttx.html