IE8、IE9不支持CORS跨域该如何解决？

2019年9月14日 180次阅读 来源: 王小匠

刚开始，Post请求如以下例子，在除IE9以下的主流浏览器是正常，没有报错等啥的。然后一到IE8、9就没有反应了。
直接不响应，我刚开始第一反应就是禁用了脚本。后来才知道IE8、9的兼容性问题。

    var _Url = 'http://baidu.com/login';
    var _Data = {user:'xiaomi',password:'123456'};
    
    $.post( _Url , _Data ,
      function(res) {
        console.log(res)
      }
    );

查询了一下资料，jQuery与插件 jQuery-ajaxTransport-XDomainRequest 相互配合就可以解决兼容性问题了。注意：使用了这个插件就不能够添加自定义的header信息了，只支持 contentType: ‘text/plain’，异步。根据其文档编写成如下：

var _Url = 'http://baidu.com/login';
var _Data = {user:'xiaomi',password:'123456'};

// GET
$.getJSON(_Url).done(function(res) {
   console.log(res)
});

// POST
$.ajax({
  url: _Url,
  data: _Data ,
  contentType: 'text/plain',
  type: 'POST',
  dataType: 'json'
}).done(function(res) {
   console.log(res)
})

我以为酱紫处理就好了，因为界面有反应了。报了后台返回的msg：账号或者密码错误。然而后来我输入了正确的账号及对应的密码，还是这个错误就感觉不对了,GET请求没有问题，但是POST请求还有点小BUG。后来实在找不出原因，就叫后台看了一下我的请求，发现没有后台没有接收到携带过去的参数。但是看了调试页面确实发送过去了。

《IE8、IE9不支持CORS跨域该如何解决？》

根据后台描述：说是要搜索整个发送过去的文档才能解析到携带的参数，不采用这个解决方案。于是前端退一步，当遇到IE8、IE9浏览器时，携带参数放置地址携带给后台。_Url + ‘？user=test10&password=123456’。

var _Url = 'http://baidu.com/login';
var _Data = {user:'xiaomi',password:'123456'};
    
if (window.XDomainRequest) _Url = _Url + '?' + toQueryString(_Data); 
$.ajax({
     url: _Url,
     data: _Data,
     type: _Method,
     dataType: 'json'
     }).done(function (oResult) {
          console.log(oResult)
     })
     
//对象转换为URL查询参数
function toQueryPair(key, value) {
    if (typeof value === 'undefined') return key;
    return key + '=' + encodeURIComponent(value === null ? '' : String(value));
}

//对象转换为URL查询参数
function toQueryString(obj) {
    var ret = [];
    for (var key in obj) {
        key = encodeURIComponent(key);
        var values = obj[key];
        if (values && values.constructor == Array) {   //数组
            var queryValues = [];
            for (var i = 0, len = values.length, value; i < len; i++) {
                value = values[i];
                queryValues.push(toQueryPair(key, value));
            }
            ret = ret.concat(queryValues);
        } else { //字符串
            ret.push(toQueryPair(key, values));
        }
    }
    return ret.join('&');
}

酱紫可以解决问题了。
欢迎观看不定期更新的技术贴。O(∩_∩)O哈哈~
如有文章存在BUG，欢迎更正哦！

    原文作者：王小匠
    原文地址: https://segmentfault.com/a/1190000014871352
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞