如何在 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().AllowAnyHeader())
);

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

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

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

结果如下：