前端ajax+cors+post跨域对于IE兼容性分析

Posted 2021-04-15 IT肌肉男

CORS需要浏览器和服务器同时支持.IE10以下不支持

参考文献：

https://blogs.msdn.microsoft.com/ieinternals/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds/

http://www.ruanyifeng.com/blog/2016/04/cors.html

https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest?utm_source=caibaojian.com

http://caibaojian.com/cors-post.html

http://www.jb51.net/article/82384.htm

一、服务器端：

Access-Control-Allow-Credentials: true (是否允许发送cookie,默认情况下cookie不包括在CORS请求中)

Access-Control-Expose-Headers: XXX (指定XMLHttpRequest对象的getResponseHeader()方法可以获取其他字段, 默认情况下只能拿6个基本字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma)

二、前端js：

1.使用ajax技术请求数据

兼容ie7到ie11,edge,chrome,firefox的ajax发送接收post数据代码

function getxhr()

{

    //获取ajax对象

    var xhr = null;

    try

    {

        xhr = new XDomainRequest();

    }

    catch(e)

    {

        try

        {

            xhr = new XMLHttpRequest();

        }

        catch(e)

        {

            try

            {

                xhr = new ActiveXObject("Msxml2.XMLHTTP");

            }

            catch(e)

            {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

        }

    }

    return xhr;

}

解析：

1) XDomainRequest()对象是IE89用于对CORS跨域的实现

局限性: 

a.cookie不会随请求发送,也不会随响应返回

b.只能设置请求头部信息中的Content-Type字段

c.不能访问响应头部信息

d.只支持简单的GET和POST请求

2) XMLHttpRequest()对象用于兼容标准浏览器

3) ActiveXObject("Msxml2.XMLHTTP");对象用于兼容IE6+浏览器

4) ActiveXObject("Microsoft.XMLHTTP")对象用于兼容IE5.5+浏览器

非跨域情况下,只要对象234即可,跨域情况下IE89需要对象1,但是局限性如上所示,相当于没用。

1)标准浏览器正常XMLHttpRequest对象:

try{

var xhr = getXHR();

var url = "http://www.xxx.com";

xhr.open("POST", url, true);

xhr.setRequestHeader("Content-Type","application/json");

xhr.setRequestHeader("指定字段", "指定字段值");

xhr.onreadystatechange = function() {

if  (4 == xhr.readyState && 200 == xhr.status) {

console.log(xhr.responseText);

    } else {

   console.log(xhr.statusText);

    };

  };

xhr.send(JSON.stringify(RequestBody));

}

2)IE89除了get方式以外,post只在这种情况下的生效：

var xhr = getXHR();

xhr.onload = function(){

console.log(xhr.responseText);

};

xhr.onerror = function(){

console.log("请求出错");

}

var url = "http://www.xxx.com";

xhr.open("POST", url);

xhr.Content-Type = "text /plain;charset=utf-8";

xhr.send("name1=value&name2=value2");

cors跨域兼容对比：

1)IE89下只支持设置请求头Content-Type字段的三种值：

application/x-www-form-urlencoded、 multipart/form-data、 text/plain

其余请求头字段无效

2)IE89不支持onreadystatechange对象,但是有onload和onerror对象

3)IE89的发送请求头字段写法不一样

正常浏览器: xhr.setRequestHeader("Content-Type","application/json");

IE89:xhr.Content-Type = "text /plain;charset=utf-8";

4)IE89只支持异步

正常浏览器: xhr.open("POST", url, true);

IE89: xhr.open("POST", url);

5)相当于CORS跨域不支持IE10以下浏览器。。。。。。

解决办法: 

在接口不能修改的情况下,只能考虑后台代理调取接口,然后重新转发给同源下的js脚本,解决跨域问题。