vs2022 WebApi 与Ajax联调--跨域

最新推荐文章于 2024-08-10 16:43:15 发布

远山m

最新推荐文章于 2024-08-10 16:43:15 发布

阅读量433

点赞数 11

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_46074138/article/details/136174989

版权

本文介绍了如何在前端使用HTML和jQuery通过Ajax向ASP.NETCoreWebAPI发起GET请求，并展示了CORS设置以允许跨域访问。后端部分详细描述了API控制器的创建和CORS策略配置。

摘要由CSDN通过智能技术生成

前台

新建一个html文件：

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Document</title>
    <link rel="shortcut icon" href="#" />
</head>
<body>
    <button type="button" id="btn">get data</button>
    <div id="test"></div>
</body>
<script src="js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
function a(data){
console.log("a"+data);
}
    $("#btn").click(function () {
        $.ajax({
            type: "get",
            url: "https://localhost:7030/api/values/GetTest001",
            success: function (data) {
                console.log("success");
                const tr = document.getElementById("test");
                tr.innerText=data;
                console.log("data:" + data);
            },
            error(jqxHR, textStatus, errorThrown) {
                console.log("error");
                console.log(jqxHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    });
</script>
</html>

后台

1.新建一个ASP.NET Core Web API项目

2.Controller文件夹下添加 API Controller - Empty类型的ValuesControllers.cs

3.把ValuesControllers.cs文件里的Route改成[Route("api/[controller]/[Action]")]

4.新建一个get方法(GetTest001)

这里返回字符串“aaa”。

5.Program.cs里添加

builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().WithExposedHeaders("X-Pagination"));
});

app.UseCors("CorsPolicy");

6.运行WebApi和Html文件

效果

远山m

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
vs2022 WebApi 与Ajax联调--跨域

Program.cs里添加builder.Services.AddCors(options =>{ options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().WithExposedHeaders("X-Pagination"));});app.UseCors("CorsPolicy");
复制链接

扫一扫