IE8和IE9发送跨域请求

IE8和IE9跨域请求“拒绝访问”

页面中偶尔会有跨域的需求，之前使用过jsonp格式的，但是这次后端提供了可以跨域访问的接口。
接口表现如下：
1、在谷歌浏览器和火狐浏览器上正常
2、在IE10及以上浏览器上正常
3、在IE9和IE8浏览器上请求发送了，但是后端接口接收不到请求记录，在【网络】面板上也查询不到接口发送记录

在IE9和IE8浏览器上经过打断点调试，发现是请求send()之后，立马被浏览器抛出异常“拒绝访问”

function _http(_url, _method, _data, _async, _success, _err) {try {// 1.创建XMLHttpRequest对象var xhr = null;xhr = new XMLHttpRequest();// 2.打开与服务器的链接xhr.open(_method, _url, _async);// 设置请求头参数格式xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");// 3.响应就绪xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {var response = JSON.parse(xhr.responseText);_success && _success(response )} else {_err && _err(e)}}};// 4.发送给服务器xhr.send(_data)} catch (e) {// 捕获异常console.log(e)_err && _err(e)}
}

看来在IE8和IE9上使用XMLHttpRequest发送跨域请求是有问题的。
在MDN上搜索了一下，官方文档上描述IE8和IE9发送跨域请求使用XDomainRequest，IE10及以上可以直接使用XMLHttpRequest
XDomainRequestMDN链接如下
微软官网的XDomainRequestMDN使用文章
微软XDomainRequest文章的翻译

以下是该方法的使用方法
// 创建跨域请求对象
var xdr = new XDomainRequest()
xdr对象含有的方法如下

XDomainRequest原型链上的方法如下

// 设置超时时间
xdr.timeout = 5000

//请求报头Content-Type，可以设置，但是获取的时候始终为""
xdr.contentType

// 读取超时时间
xdr.timeout

// 超时事件
xdr.ontimeout = function () {};

// 请求异常事件
xdr.onload = function () {};

// 请求完成事件
xdr.onload = function () {};

// 请求进度事件
xdr.onprogress = function () {};

//接口的响应数据（只读，虽然可以设置，但是设置的值不生效）
xdr.responseText

// 与服务器建立连接，只支持get 和 post 请求，XDomainRequest为异步请求，不支持设置同步还是异步
// http的页面只能使用http接口，https页面只能使用https接口
xdr.open(method, url);

// 发送请求，为避免两个请求相隔时间太近没有响应，使用setTimeout 执行
setTimeout(function () {
xdr.send(_data);
}, 0);

// 中断请求
xdr.abort();

function _xdrhttp(_url, _method, _data, _success, _err) {try {// 创建跨域请求对象var xdr = new XDomainRequest(), timer = null;// 设置超时时间为5sxdr.timeout = 5000xdr.ontimeout = function() {xdrError('操作失败，请求超时。')};xdr.onerror = function(e) {xdrError('操作失败，请安装驱动程序后重试。')};xdr.onload = function() {var response = JSON.parse(xdr.responseText);_success && _success(response);}// 2.打开与服务器的链接xdr.open(_method, _url);setTimeout(function() {// 发送请求xdr.send(_data);}, 0);} catch (e) {xdrError('操作失败，请安装驱动程序后重试。')}// 统一的错误处理方法function xdrError(msg) {_err && _err({status: 500,message: msg,ret: 'fail'});}
}

使用XDomainRequest发送请求返回结果

问题解决，皆大欢喜

在附一个已经封装好的 jQuery-ajaxTransport-XDomainRequest 插件链接
我近期打算在发一篇【IE开发者工具】使用技巧，要是有猿友也有使用技巧或者IE其他bug调试愿意分享的可以私信我

IE8和IE9发送跨域请求相关推荐

Vue（八）发送跨域请求
使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法使用this.$http ...
Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法安装axios npm i axios -s main.js中引入 import axios from 'axios'//将axios挂载在 ...
Chrome 96 版本无法发送跨域请求的问题解决方案
前言我之前那个篇文章 Chrome 96版本无法携带cookie问题的解决方案解决的问题是因为跨域导致的无法携带cookie 的问题,而不是跨域问题,因为网上现有的解决方案可以通过配置chr ...
ajax技术发送跨域请求时设置携带cookie信息
在使用ajax技术发送跨域请求时,默认情况下不会在请求中携带cookie信息,如s1网站的客户端向s1服务器端发送数据请求时设置 xhr.withCredentials = true 默认为false ...
java学习笔记——众筹项目练习——前台系统的实名认证功能、ajax发送跨域请求、后台manager系统的实名认证人工审核
实名认证功能前面的文章中我们实现了后台manager系统中的流程管理功能,并且将实名认证的流程上传到 ...
原生jsonp发送跨域请求
回到文章总目录同源策略当前打开的浏览器的url和当前页面ajax请求的url一样才叫同源协议,端口,域名三者一样满足同源策略使用jsonp解决跨域 script标签本身具备跨域特性,当我直接打 ...
利用Access-Control-Allow-Origin响应头解决跨域请求
标签:cors 跨域请求 ACAO 2015-11-28 18:53 12103人阅读评论(0) 收藏举报分类: web前端(5) J2EE服务器(2) 传统的跨域请求没有好的解决方案,无 ...
AJAX请求和跨域请求详解（原生JS、Jquery）
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
laravel php跨域请求,laravel开发中跨域的解决方案
前言众所周知我们大家在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 l ...

IE8和IE9发送跨域请求

IE8和IE9跨域请求“拒绝访问”

IE8和IE9发送跨域请求相关推荐

最新文章

热门文章