如何在 ASP.NET WebAPI 中允许 CORS

Question

我正在尝试从我的 Web 应用向我的 ASP.NET 端点（一切都在本地）发出 ajax post 请求，以将数据插入我的数据库，但我总是得到 POST http://localhost:44326/radar/insertConfig net::ERR_CONNECTION_RESET.

到目前为止我收集到的信息：通过 Insomnia 调用时，端点运行良好；我有其他 GET 请求在相同条件下（相同页面、相同域等）完美运行；我已经测试了我对 public 端点的 POST 请求，一切正常；请求永远不会离开浏览器（或永远不会到达目的地）。 仅当从我的 Web 应用程序向我的 API 发送 POST 请求时才会出现此问题。

我尝试过的方法：使用其他浏览器（Chrome、Edge、Firefox）、删除 cookie、清除缓存、重置我的连接、重置我的计算机、尝试使用不同的连接。

注意 1：我正在使用无法关闭的 VPN 和防病毒软件（两者都没有）。

注意 2：通过 firefox 完成时，错误变为：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:44326/radar/insertConfig. (Reason: CORS request did not succeed).

我的要求：

var json = JSON.stringify(obj);
var url = "http://localhost:44326/radar/insertConfig";
$.post(url, json, function (status) {
    if (status == "success")
        alert("yay");
    else
        alert("nay");
}, "json");

发生错误的行：plugins.bundle.js:9838

xhr.send( options.hasContent && options.data || null );

可能是什么问题？

更新：我在服务器中添加了一个如下所示的中间件：

app.Use(async (context, next) =>
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
            await next.Invoke();
        });

但是如果我这样做，那么 return 就会变成 415（不支持的媒体类型）。我试图通过更改请求来解决此问题：

$.ajax({
    url: url,
    type: 'post',
    data: json,
    contentType: 'application/json',
    dataType: 'json',
    success: function (status) {
        if (status == "success")
            alert("yay");
        else
            alert("nay");
    }
});

但话又说回来，CORS 错误 returns...

Answer 1

从错误消息来看，您的客户端和服务器似乎来自不同的域，为了能够从不同的域调用您的服务器，您需要在服务器上启用 CORS。

对于 asp.net 服务器，您可以使用 Microsoft.AspNet.WebApi.Cors nuget 包并在您的控制器上添加 EnableCors 属性，如下所示 [EnableCors(origins: "http://{your-client-domain}", headers: "*", methods: "*")]

Answer 2

我必须改变一些东西才能让它工作，这是我的解决方案：

第 1 步：将其添加到 ConfigureServices 和 Configure（默认情况下，它们位于 Startup.cs）

public void ConfigureServices(IServiceCollection services)
{
        services.AddCors(options =>
        {
            options.AddPolicy(name: "MyPolicy",
                builder =>
                {
                    //This is how you tell your app to allow cors
                    builder.WithOrigins("*")
                            .WithMethods("POST", "DELETE", "GET")
                            .AllowAnyHeader();
                });
        });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors("MyPolicy");
}

第 2 步：将请求更改为 $.ajax 而不是 $.post

$.ajax({
    url: url,
    type: "post",
    crossDomain: true,
    data: json,
    contentType: "application/json",
    dataType: "json"
});

如何在 ASP.NET WebAPI 中允许 CORS

How to allow CORS in ASP.NET WebAPI

javascript

asp.net

ajax

post