如何测试跨域

baiwangea / 2023-08-07 / 原文

PHP设置允许跨域：

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods:*');
header('Access-Control-Allow-Headers:*');
header("Access-Control-Request-Headers: *");

或者Nginx配置：
location /{
    #告诉浏览器允许跨域访问的方法
    add_header Access-Control-Allow-Methods *;
    # 告诉浏览器缓存OPTIONS预检请求1小时
    add_header Access-Control-Max-Age 3600;
    #允许带有cookie访问
    add_header Access-Control-Allow-Credentials true;
    #注意 * 不能满足带有cookie的访问,Origin 必须是全匹配,这里通过变量获取
    add_header Access-Control-Allow-Origin $http_origin;
    #设置支持所有的自定义请求头
    add_header Access-Control-Allow-Headers $http_access_control_request_headers;
    #如果预检请求,则返回成功,不需要转发到后端
    if ($request_method = OPTIONS){
        return 200;
    }
}

跨域测试方法
自己测试跨域的时候一致都是写一个单独的项目，用不同的端口运行起来调自己项目中的接口。这样很麻烦，一直以为postman会有测跨域的功能，但没找到。偶然间发现浏览器自己就可以测跨域，方法也很简单，随便打开一个网站后打开【开发者工具】，里面的【Console】可以直接输入js代码测试：

var token= "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleV86IjoiMGY4YTlmYzgtODZmMi00NjM3LWFlNGUtYTdmYTQyMzIzMmYwIn0.9NR3VRvgOg2USyCMyUaBEpZKETj3tn9eIdnQo7vXQH_0hwqWOKAkSxCYNtYOnPoRLEOaJQTVdq22grvvqYU4Fw";
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:6060/system/dept/list');
xhr.setRequestHeader("x-access-token",token);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}
没有token验证的可以去掉token设置
输入完后直接按回车键就可以返回结果：