FreezeJ' Blog

检测跨域的小代码

2022-02-28

如果资源不存在,也可能会触发跨域提示(提示非常相似),请先确认资源能被直接请求到,再调试跨域问题!

利用chrome F12 DevTools的console,输入以下代码:

跨域访问不存在资源

从简书跨域访问百度不存在的资源

let checkUrl = "https://www.baidu.com/not_found.png"  // 需要测试的跨域链接
var xhr = new XMLHttpRequest();
xhr.open('GET', checkUrl);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    // console.log(xhr.responseText);  // 输出内容
    console.log(xhr.status);  // 输出请求状态
}

跨域失败例子

从简书跨域访问百度资源

let checkUrl = "https://www.baidu.com/favicon.ico"  // 需要测试的跨域链接
var xhr = new XMLHttpRequest();
xhr.open('GET', checkUrl);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    // console.log(xhr.responseText);  // 输出内容
    console.log(xhr.status);  // 输出请求状态
}

跨域成功例子

从简书跨域访问jquery资源

let checkUrl = "https://code.jquery.com/jquery-migrate-1.2.1.min.js"  // 需要测试的跨域链接
var xhr = new XMLHttpRequest();
xhr.open('GET', checkUrl);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    // console.log(xhr.responseText);  // 输出内容
    console.log(xhr.status);  // 输出请求状态
}

Nginx跨域头部配置

location配置中加入:

        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Mo
dified-Since,Cache-Control,Content-Type,Authorization';