使用chrome浏览器中的Console方便调试跨域请求

publish:April 20, 2020 -Monday by 04007 本站原创文章,转载请注明文章出处：www.04007.cn

本文地址:http://www.04007.cn/article/799.html

关于跨域之前有过几篇文章：CORS使用Access-Control-Allow-Origin来允许跨域请求 http://www.04007.cn/article/752.html 等，服务端打开全量允许跨域也很简单，只需要在server模块中添加如下配置重启nginx即可：本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';

本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.

但很多的时候可能并不是全量放开跨域，而是允许某些请求TYPE以及某些域名可以跨域，这时就需要好好调试，可以在页面执行的时候进行调试，不过有一个很简单的调试方法，就是直接在浏览器的开发者工具中使用。本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.

随便打开一个网页，比如我这里打开的是百度，后打开->开发者工具->Console, 清空下方内容后，可以直接输入js代码进行测试，输入以下代码：本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.04007.cn/');
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.

按回车键就可以执行JS跨域请求，看返回结果，如下图是没有放开跨域时返回的结果，在服务端nginx添加上面的add_header输出后调试即能正常查看页面返回结果。本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/799.html,未经许可,不得转载.