从 Axios 调用 .Net WebAPI 时出现 CORS 错误

Question

我有一个登录表单，我在其中使用 Axios 调用 .Net API 做出反应

axios
.post(
    'https://localhost:5001/login',
    {
        email: 'abc@gmail.com',
        password: '12345',
    },
    {
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
        },
    },
)
.then(function (response) {
    console.log(response)
})
.catch(function (error) {
    console.log(error)
})

下面是 Startup.cs 在 API 端处理 CORS 的代码

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSwaggerGen(c =>
    {
        c.SwaggerDoc("v1", new OpenApiInfo { Title = "API", Version = "v1" });
    });
    services.AddCors(option => 
    {
        option.AddPolicy("CorsPolicy", policy =>
        {
            policy.AllowAnyMethod().AllowAnyHeader().WithOrigins("http://localhost:3000/");
        });
    }); 
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseSwagger();
        app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "API v1"));
    }
    // app.UseHttpsRedirection();
    app.UseRouting();
    app.UseCors("CorsPolicy");
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

在浏览器的控制台中，我收到以下错误：

Access to XMLHttpRequest at 'https://localhost:5001/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)

POST https://localhost:5001/login net::ERR_FAILED

我已经使用 VS 代码的 REST Client 扩展测试了 API。 API 工作正常，但从浏览器调用时出现这些错误。

Answer 1

尝试将 AddCors 移动到配置部分的顶部，在 AddControllers 之前。还要更改语法并从 url 中删除尾随的“/”：

services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
            {
                builder.WithOrigins("http://localhost:3000")
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));