如何在ASP.NET Core 6.0 Web API项目中启用cors？

Question

在我的 ASP.NET Core 6.0 Web API 项目中配置了 CORS。但预检请求收到 http 405 错误。

换句话说，不允许使用 HTTP OPTION。看起来 cors 没有启用。

我见过带有

config.EnableCors();

的示例，但此项目模板中没有

App_Start/WebApiConfig.cs

。

我在这里缺少什么？

程序.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var devCorsPolicy = "devCorsPolicy";
builder.Services.AddCors(options =>
{
    options.AddPolicy(devCorsPolicy, builder => {
        //builder.WithOrigins("http://localhost:800").AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
        builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
        //builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost");
        //builder.SetIsOriginAllowed(origin => true);
    });
});


var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
    app.UseCors(devCorsPolicy);
}
else 
{
    app.UseHttpsRedirection();
    app.UseAuthorization();
    //app.UseCors(prodCorsPolicy);
}

app.MapControllers();

app.Run();

Answer 1

添加服务

builder.Services.AddCors

和应用程序添加

app.UseCors("corsapp");

将

builder.WithOrigins("*")

替换为

builder.WithOrigins("http://localhost:800", "https://misite.com");

检查文档

     var builder = WebApplication.CreateBuilder(args);

    
    // Add services to the container.
    
    builder.Services.AddControllers();
    
    // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();
    //services cors
    builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
    {
        builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
    }));
    
    var app = builder.Build();
    
    if (app.Environment.IsDevelopment())
    {
        app.UseSwagger();
        app.UseSwaggerUI();
        
    }
       //app cors
        app.UseHttpsRedirection();
        app.UseRouting();
        app.UseCors("corsapp");
        app.UseAuthorization();

        //app.UseCors(prodCorsPolicy);

    app.MapControllers();
    
    app.Run();

Answer 2

这个 CORS 的设置可能会让人头疼，尤其是第一次。但只要精确，你就可以做到。

在您的

Program.cs

文件中，进行以下更改。请注意，需要在

var app = ...

语句上方和下方进行两项更改：

builder.Services.AddCors(policyBuilder =>
    policyBuilder.AddDefaultPolicy(policy =>
        policy.WithOrigins("*").AllowAnyHeader().AllowAnyMethod())
);

var app = builder.Build();
app.UseCors();

如果您指定实际来源，请确保包含

http

部分，例如：

...
policy.WithOrigins("http://localhost:3000")

发出请求的网络浏览器代码也应该是正确的。这是使用 axios 在 javascript 中发出的请求：

import axios from "axios";

const api = 'http://localhost:5000'

/**
 * 
 * @returns {TransferHeader[]}
 */
export const fetchTransfers = async () => {
    const { data } = await axios({
        method: 'get',
        url: `${api}/api/transfers`,
        // withCredentials: true
    })
    console.log(data)
    return data 
}

Answer 3

对于任何和我犯同样错误的人： 确保调用 Web API 的客户端应用程序具有采用

https://

方案的正确 url。所以

localhost:8100/api

应该是

https://localhost:8100/api

。

Answer 4

我有一个问题，我相信通配符选项也可以直接用于端口。当我设置正确的端口时，它就起作用了。 （

http://localhost:*

不起作用！）

        services.AddCors(options =>
        {
            options.AddPolicy(AllowCorsPolicyName,
                builder =>
                {
                    builder
                        .WithOrigins(
                            "http://localhost:5173",
                            "http://localhost:5174",
                            "https://*.example.com",
                            )
                        .SetIsOriginAllowedToAllowWildcardSubdomains()
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
        });

        // With endpoint routing, the CORS middleware must be configured to execute between the calls to UseRouting and UseEndpoints.
        app.UseCors(AllowCorsPolicyName);

可以在这里找到文档： https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0

当使用

app.UseHttpsRedirection()

并调用 http 端点时，它也将不起作用

Answer 5

和我一起工作

app.UseCors(builder => builder
.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed((host) => true)
.AllowCredentials());

Answer 6

您发布的代码似乎运行良好。我将代码粘贴到新的 .NET 6 项目中，当从浏览器发送如下请求时，CORS 标头将添加到响应中。

fetch('http://localhost:7107/Weatherforecast').then(res => res.json()).then(e => console.log(e))

产生以下响应：

Answer 7

参考 Microsoft 文档

您必须按照一些步骤启用 CORS（跨域资源共享）

1. 在程序课中：

   • 设置策略名称“它是可选的，但会帮助您避免多次重复写入”。

     var  MyAllowedOrigins = "_myCORS";
     

   • 配置CORS服务。

     builder.Services.AddCors(options =>{
          options.AddPolicy(name: MyAllowedOrigins ,
                  policy  =>
                  {
                      policy.WithOrigins("Write URL here")
                      .AllowAnyHeader()
                      .AllowAnyMethod()
                      .AllowCredentials());
                  });
           }); 
     

   • 添加CORS中间件，在授权前处理跨域请求。

     app.UseCors(MyAllowedOrigins);