测试接口是否支持跨域

域见同学

2488人浏览 · 2022-05-05 14:15:32

域见同学 · 2022-05-05 14:15:32 发布

通常情况，前后端项目分离，后端需要设置允许跨域，跨域配置完成后，如何测试接口跨域是否成功？
方案如下：
在这里插入图片描述

新建HTML文件，将下面代码拷贝，运行即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.5.3/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
    <h1 style="margin-top:50px">跨域测试</h1>
    <!-- Content here -->
    <p class="text-left">API地址:</p>
    <input type="text" style="width:600px;height:30px;font-size:14px;" id="urlText" value=""/>
    <p>&nbsp;
    <p/>
    <p class="text-left">Token:</p>
    <input type="text" style="width:600px;height:30px;font-size:14px;" id="tokenTxt"  value=""/>
    <p>&nbsp;
    <p/>
    <input type="button" class="btn btn-outline-primary" id="cors" value="验证跨域"/>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script src="https://cdn.staticfile.org/popper.js/1.8.0/popper.min.js" ></script>
<script src="https://cdn.staticfile.org/bootstrap/4.5.3/js/bootstrap.min.js" ></script>

<script type="text/javascript">
    $("#cors").on('click', function (event) {
        event.preventDefault();
        var url2 = $("#urlText").val();
        $.get({
            contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
            url: url2,
            beforeSend: function (xhr) {
                if ($("#tokenTxt").val().trim()) {
                    /* Authorization header */
                    xhr.setRequestHeader("Authorization", "Bearer " + $("#tokenTxt").val());
                }
            },
            success: function (data) {
                alert("success");
            },
            error:function(data){
				alert("failed");
            }
        })
    });
</script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模