快捷導(dǎo)航

XDomainRequest之IE8和IE9發(fā)送跨域請(qǐng)求拒絕訪問解決方法

更新時(shí)間：2023年06月18日 12:54:41 作者：努力的小小D

這篇文章主要介紹了XDomainRequest之IE8和IE9發(fā)送跨域請(qǐng)求拒絕訪問解決方法,需要的朋友可以參考下

IE8和IE9跨域請(qǐng)求“拒絕訪問”

頁面中偶爾會(huì)有跨域的需求，之前使用過jsonp格式的，但是這次后端提供了可以跨域訪問的接口。

接口表現(xiàn)如下：

1、在谷歌瀏覽器和火狐瀏覽器上正常
2、在IE10及以上瀏覽器上正常
3、在IE9和IE8瀏覽器上請(qǐng)求發(fā)送了，但是后端接口接收不到請(qǐng)求記錄，在【網(wǎng)絡(luò)】面板上也查詢不到接口發(fā)送記錄

在IE9和IE8瀏覽器上經(jīng)過打斷點(diǎn)調(diào)試，發(fā)現(xiàn)是請(qǐng)求send()之后，立馬被瀏覽器拋出異常“拒絕訪問”

function _http(_url, _method, _data, _async, _success, _err) {
    try {
        // 1.創(chuàng)建XMLHttpRequest對(duì)象
        var xhr = null;
        xhr = new XMLHttpRequest();
        // 2.打開與服務(wù)器的鏈接
        xhr.open(_method, _url, _async);
        // 設(shè)置請(qǐng)求頭參數(shù)格式
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
        // 3.響應(yīng)就緒
        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.發(fā)送給服務(wù)器
        xhr.send(_data)
    } catch (e) {// 捕獲異常
        console.log(e)
        _err && _err(e)
    }
}

IE9瀏覽器調(diào)試截屏

看來在IE8和IE9上使用XMLHttpRequest發(fā)送跨域請(qǐng)求是有問題的。
在MDN上搜索了一下，官方文檔上描述IE8和IE9發(fā)送跨域請(qǐng)求使用XDomainRequest，IE10及以上可以直接使用XMLHttpRequest

XDomainRequestMDN鏈接如下
 微軟官網(wǎng)的XDomainRequestMDN使用文章
 微軟XDomainRequest文章的翻譯

以下是該方法的使用方法

// 創(chuàng)建跨域請(qǐng)求對(duì)象
var xdr = new XDomainRequest()

xdr對(duì)象含有的方法如下

XDomainRequest原型鏈上的方法如下

在這里插入圖片描述

// 設(shè)置超時(shí)時(shí)間
xdr.timeout = 5000

//請(qǐng)求報(bào)頭Content-Type，可以設(shè)置，但是獲取的時(shí)候始終為""
xdr.contentType

可以設(shè)置Content-Type，但是獲取的時(shí)候始終為""

// 讀取超時(shí)時(shí)間
xdr.timeout

// 超時(shí)事件
xdr.ontimeout = function () {};

// 請(qǐng)求異常事件
xdr.onload = function () {};

// 請(qǐng)求完成事件
xdr.onload = function () {};

// 請(qǐng)求進(jìn)度事件
xdr.onprogress = function () {};

//接口的響應(yīng)數(shù)據(jù)（只讀，雖然可以設(shè)置，但是設(shè)置的值不生效）
xdr.responseText

// 與服務(wù)器建立連接，只支持get 和 post 請(qǐng)求，XDomainRequest為異步請(qǐng)求，不支持設(shè)置同步還是異步
// http的頁面只能使用http接口，https頁面只能使用https接口
xdr.open(method, url);

// 發(fā)送請(qǐng)求，為避免兩個(gè)請(qǐng)求相隔時(shí)間太近沒有響應(yīng)，使用setTimeout 執(zhí)行
setTimeout(function () {
xdr.send(_data);
}, 0);

// 中斷請(qǐng)求
xdr.abort();

function _xdrhttp(_url, _method, _data, _success, _err) {
    try {
        // 創(chuàng)建跨域請(qǐng)求對(duì)象
        var xdr = new XDomainRequest()
          , timer = null;
        // 設(shè)置超時(shí)時(shí)間為5s
        xdr.timeout = 5000
        xdr.ontimeout = function() {
            xdrError('操作失敗，請(qǐng)求超時(shí)。')
        }
        ;
        xdr.onerror = function(e) {
            xdrError('操作失敗，請(qǐng)安裝驅(qū)動(dòng)程序后重試。')
        }
        ;
        xdr.onload = function() {
            var response = JSON.parse(xdr.responseText);
            _success && _success(response);
        }
        // 2.打開與服務(wù)器的鏈接
        xdr.open(_method, _url);
        setTimeout(function() {
            // 發(fā)送請(qǐng)求
            xdr.send(_data);
        }, 0);
    } catch (e) {
        xdrError('操作失敗，請(qǐng)安裝驅(qū)動(dòng)程序后重試。')
    }
    // 統(tǒng)一的錯(cuò)誤處理方法
    function xdrError(msg) {
        _err && _err({
            status: 500,
            message: msg,
            ret: 'fail'
        });
    }
}

使用XDomainRequest發(fā)送請(qǐng)求返回結(jié)果