如果资源不存在,也可能会触发跨域提示(提示非常相似),请先确认资源能被直接请求到,再调试跨域问题!
利用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';
赏
使用支付宝打赏
使用微信打赏
若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏