XDomainRequest之IE8和IE9发送跨域请求拒绝访问解决方法

 更新时间:2023年06月18日 12:54:41   作者:努力的小小D  
这篇文章主要介绍了XDomainRequest之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)
    }
}

IE9浏览器调试截屏

看来在IE8和IE9上使用XMLHttpRequest发送跨域请求是有问题的。
在MDN上搜索了一下,官方文档上描述IE8和IE9发送跨域请求使用XDomainRequest,IE10及以上可以直接使用XMLHttpRequest

XDomainRequestMDN链接如下
微软官网的XDomainRequestMDN使用文章
微软XDomainRequest文章的翻译

以下是该方法的使用方法

// 创建跨域请求对象
var xdr = new XDomainRequest()

xdr对象含有的方法如下

xdr对象含有的方法如下

XDomainRequest原型链上的方法如下

在这里插入图片描述

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

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

可以设置Content-Type,但是获取的时候始终为""

// 读取超时时间
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;
        // 设置超时时间为5s
        xdr.timeout = 5000
        xdr.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发送请求返回结果

使用XDomainRequest发送请求返回结果

问题解决,皆大欢喜

在附一个已经封装好的 jQuery-ajaxTransport-XDomainRequest 插件链接

具体的使用可以参考下一篇文章。

相关文章

  • JavaScript图片的Base64编码以及转换详解

    JavaScript图片的Base64编码以及转换详解

    现在网站为了提升用户的浏览体验越来越多的使用了图片,而这些图片通常以 Base64 的形式存储和加载,下面这篇文章主要给大家介绍了关于JavaScript图片的Base64编码以及转换的相关资料,需要的朋友可以参考下
    2022-07-07
  • 微信小程序view与scroll-view组件的使用介绍

    微信小程序view与scroll-view组件的使用介绍

    小程序中的组件也是由宿主环境提供的,开发者可以使用组件快速搭建出页面结构,这篇文章主要介绍了微信小程序view与scroll-view组件的使用
    2022-10-10
  • javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    这篇文章主要介绍了javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 微信小程序中的数据存储实现方式

    微信小程序中的数据存储实现方式

    这篇文章主要介绍了微信小程序中的数据存储实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-08-08
  • 原生js实现上传图片控件

    原生js实现上传图片控件

    这篇文章主要为大家详细介绍了原生js实现上传图片控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • javascript算法之数组反转

    javascript算法之数组反转

    这篇文章主要介绍了javascript算法之数组反转,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 如何获取元素的最终background-color

    如何获取元素的最终background-color

    本文主要介绍了如何获取元素的最终background-color的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js判断移动端是否安装某款app的多种方法

    js判断移动端是否安装某款app的多种方法

    这篇文章主要介绍了js判断移动端是否安装某款app的多种方法,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 微信小程序实现的canvas合成图片功能示例

    微信小程序实现的canvas合成图片功能示例

    这篇文章主要介绍了微信小程序实现的canvas合成图片功能,结合实例形式分析了微信小程序canvas合成图片相关组件使用、操作步骤与注意事项,需要的朋友可以参考下
    2019-05-05
  • javascript的解析执行顺序在各个浏览器中的不同

    javascript的解析执行顺序在各个浏览器中的不同

    javascript是一种解释型语言,它的执行是自上而下的。由于各个浏览器对它的理解有所差异,所以我们有必要深入理解js的执行顺序
    2014-03-03

最新评论