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

王小匠

刚开始,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。后来实在找不出原因,就叫后台看了一下我的请求,发现没有后台没有接收到携带过去的参数。但是看了调试页面确实发送过去了。

clipboard.png

根据后台描述:说是要搜索整个发送过去的文档才能解析到携带的参数,不采用这个解决方案。于是前端退一步,当遇到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,欢迎更正哦!

阅读 9.2k

不断成长的码农
相互交流交流
214 声望
7 粉丝
0 条评论
214 声望
7 粉丝
文章目录
宣传栏