兼容IE8使用jquery请求跨域接口，解决第一次请求拒绝访问的bug

单手敲代码丶

于 2024-07-24 14:19:31 发布

阅读量406

点赞数 1

文章标签： jquery bug 前端

本文链接：https://blog.youkuaiyun.com/weixin_45926119/article/details/140661871

版权

问题描述：第一次发送请求效果如下 ↓

解决办法：

1、下载插件jquery.xdomainrequest.min.js并引入，也可以复制下面代码↓

/*!
 * jQuery-ajaxTransport-XDomainRequest - v1.0.3 - 2014-06-06
 * https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
 * Copyright (c) 2014 Jason Moon (@JSONMOON)
 * Licensed MIT (/blob/master/LICENSE.txt)
 */
(function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else if(typeof exports==='object'){module.exports=a(require('jquery'))}else{a(jQuery)}}(function($){if($.support.cors||!$.ajaxTransport||!window.XDomainRequest){return}var n=/^https?:\/\//i;var o=/^get|post$/i;var p=new RegExp('^'+location.protocol,'i');$.ajaxTransport('* text html xml json',function(j,k,l){if(!j.crossDomain||!j.async||!o.test(j.type)||!n.test(j.url)||!p.test(j.url)){return}var m=null;return{send:function(f,g){var h='';var i=(k.dataType||'').toLowerCase();m=new XDomainRequest();if(/^\d+$/.test(k.timeout)){m.timeout=k.timeout}m.ontimeout=function(){g(500,'timeout')};m.onload=function(){var a='Content-Length: '+m.responseText.length+'\r\nContent-Type: '+m.contentType;var b={code:200,message:'success'};var c={text:m.responseText};try{if(i==='html'||/text\/html/i.test(m.contentType)){c.html=m.responseText}else if(i==='json'||(i!=='text'&&/\/json/i.test(m.contentType))){try{c.json=$.parseJSON(m.responseText)}catch(e){b.code=500;b.message='parseerror'}}else if(i==='xml'||(i!=='text'&&/\/xml/i.test(m.contentType))){var d=new ActiveXObject('Microsoft.XMLDOM');d.async=false;try{d.loadXML(m.responseText)}catch(e){d=undefined}if(!d||!d.documentElement||d.getElementsByTagName('parsererror').length){b.code=500;b.message='parseerror';throw'Invalid XML: '+m.responseText;}c.xml=d}}catch(parseMessage){throw parseMessage;}finally{g(b.code,b.message,c,a)}};m.onprogress=function(){};m.onerror=function(){g(500,'error',{text:m.responseText})};if(k.data){h=($.type(k.data)==='string')?k.data:$.param(k.data)}m.open(j.type,j.url);m.send(h)},abort:function(){if(m){m.abort()}}}})}));

2、封装的接口



// 封装AJAX请求的函数
function fetchData (url, type, data, callback) {
    $.support.cors = true
    $.ajaxSetup({
        xhr: function() {
            if (window.ActiveXObject) {
                return new window.ActiveXObject('Microsoft.XMLHTTP');
            } else {
                return new window.XMLHttpRequest();
            }
        },
    })
    var ajax = {}

    ajax = {
        url: url,
        data:JSON.stringify(data),
        type: type,
        contentType: "text/plain",
        dataType: 'json',
        headers:{
            token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2NTlkMGRjNzY4OWY3NDllOTdkOWQwNDUiLCJ0ZWFtSWQiOiI2NTlkMGRjODY4OWY3NDllOTdkOWQwNjIiLCJ0bWJJZCI6IjY1OWQwZGM4Njg5Zjc0OWU5N2Q5ZDA2OCIsImV4cCI6MTcyMDY4MjE5NiwiaWF0IjoxNzIwMDc3Mzk2fQ.gZPpuiflfHnxID90VIYDbQZjwjSjxnrCo8_Z0aYxsCA',
        },
        success: function (res) {
            callback(res);
        },
        error: function (error) {
            console.error('Error fetching data: ', error);
        }
    }
    $.ajax(ajax)
}

后台也得加请求头，允许跨域！！！

好了解决