XDomainRequest IE8&IE9 cors 跨域通讯的处理方法

 

 

 版权声明：避免百度一下通片同一篇文章，未经博主允许不得转载。本博客作为笔记使用，正确性请自行验证。 https://blog.csdn.net/u014071104/article/details/80361888

这篇文章纯属湿货。

随着MVVM框架的大行其道，前端接触网路请求的机会越来越普及。

跨域也开始成为开发的家常便饭。

跨域处理方法有以下几点:

1. iframe
2. script(JSONP)
3. cors

iframe是N年前 的东西，在邮件网站上可以看到它的影子

JSONP一直都存在，在PC上没兼容问题，并且使用方便，局限是只能通过get方式发送数据

CORS可以让前端在某些情况下可以像不跨域一样请求数据，所以我们这篇只说它。

CORS配置主要在后端

可以参考:阮一峰的博客

IE8&IE9上不能使用XMLHttpRequest来通过cors来处理跨域，他们提供了一个特别的对象XDomainRequest来处理CORS跨域通讯。

可以参考:CORS

它的回掉函数和XMLHttpRequest基本一致，这里不重叙。

下面只要说几个坑点:

1.要保持请求协议和当前访问网站的协议一致。

     例如：浏览器地址栏的协议是https，那么你的XDomainRequest只能发起https请求，否则“拒绝访问”

2. 如果你使用vue同时使用CORS，想要兼容IE8！不用多想了。

   XDomainRequest是支持IE8 CORS的，但是vue不支持，这个锅并不是XDomainRequest的，XDomainRequest不背(●'◡'●)。

贴代码：

1. return new Promise((resolve, reject) => {
   let appliance = new window.XDomainRequest()
   appliance.onprogress = function () { }; // no aborting
   appliance.ontimeout = function () {
   // alert("timeout")
   reject({ eror: "timeout" });
   }; // "
   appliance.onload = function (e) {
   // do something with appliance.responseText
   // alert("onload" + appliance.responseText)
   resolve(appliance.responseText);
   };
   appliance.onerror = function (e, b) {
   // error handling
   // alert("error" + JSON.stringify(e) + JSON.stringify(b))
   reject({ eror: e });
   };
   //appliance.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   appliance.withCredentials = true; // to support sending cookies with CORS
   appliance.open("POST", axios.defaults.baseURL + url);
   appliance.send(dataToString);
   });

2018-05-31更新:

可以发送请求，但是无法携带数据