即使在配置 ASP.NET Core Web API 中启用了 CORS，CORS 也会阻止发布请求答案

【问题标题】：CORS blocking post request even though CORS is enabled in configuration ASP.NET Core Web API即使在配置 ASP.NET Core Web API 中启用了 CORS，CORS 也会阻止发布请求
【发布时间】：2021-10-28 13:29:24
【问题描述】：

我正在尝试向我的 Web API 发出一个简单的发布请求，但我收到了 CORS 错误：

跨源请求被阻止：同源策略不允许读取位于 https://localhost:5001/expression/add 的远程资源。（原因：根据 CORS 预检响应中的标头“Access-Control-Allow-Headers”，标头“content-type”是不允许的）。

请求如下：

export async function sendPostRequest(request, object) {

    try {

        const response = await fetch(request, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(object),
        });

        const result = await response.json();

        return result;

    } catch (error) {
        console.error(error);
    }
}

并且传入这个函数的url和对象如下：

var url = 'https://localhost:5001/expression/add';

var toSave = {
    'userId': 1,
    'expression': 'hello'
};

这是端点：

[ApiController]
[Route("[controller]")]
public class ExpressionController : ControllerBase
{
    [HttpPost]
    [Route("add")]
    public void Save([FromBody] ExpressionDbo expression)
    {
        repository.SaveExpression(expression);
    }
}

我的启动方式：

public void ConfigureServices(IServiceCollection services)
{
    var connection = "Server=localhost;Database=xxxx;User Id=xxxx;Password=xxxx;";

    services.AddDbContext<EvaluateContext>(options => options.UseSqlServer(connection));

    services.AddScoped<IExpressionRepository, ExpressionRepository>();

    services.AddCors(options =>
    {
        options.AddPolicy(name: MyAllowSpecificOrigins,
                    builder =>
                    {
                        builder.WithOrigins("http://localhost:8080");

                    });
    });
    services.AddControllers();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors(MyAllowSpecificOrigins);

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

GET 请求工作正常，同样的帖子请求在 Postman 中工作正常，似乎无法弄清楚我哪里出错了。

也许我需要在某处设置Access-Control-Allow-Headers 标头？

这个问题：Enabling CORS with WebAPI PUT / POST requests? 没有帮助，Cross-Origin Request Blocked: Occur even after CORS enabled on my API ; 或我的其他搜索也没有帮助。

【问题讨论】：

@dai 5001 是请求发送到的位置，api，所以在 api 中我应该有发送者的端口，前端，在我的例子中是 8080，对吗？跨度>
是的，你是对的——我没想到，抱歉。但是，您可能会遇到基于浏览器的问题，因为您正在混合使用 http 和 https。

标签： c# http .net-core cors

【解决方案1】：

要允许在 CORS 请求中发送特定标头，称为作者请求标头，请调用 WithHeaders 并指定允许的标头：

options.AddPolicy("MyAllowHeadersPolicy",
    builder =>
    {
        // requires using Microsoft.Net.Http.Headers;
        builder.WithOrigins("http://example.com")
               .WithHeaders(HeaderNames.ContentType, "x-custom-header");
    });

要允许所有作者请求标头，请调用 AllowAnyHeader：

options.AddPolicy("MyAllowAllHeadersPolicy",
    builder =>
    {
        builder.WithOrigins("https://*.example.com")
               .AllowAnyHeader();
    });

方法也一样

 options.AddPolicy(name: "MyPolicy",
                builder =>
                {
                    builder.WithOrigins("http://example.com",
                                        "http://www.contoso.com")
                            .WithMethods("PUT", "DELETE", "GET");
                });

或

 options.AddPolicy(name: "MyPolicy",
                builder =>
                {
                    builder.WithOrigins("http://example.com",
                                        "http://www.contoso.com")                                                  
                           .AllowAnyMethod();
                });

另外，请注意

http://localhost:8080 
https://localhost:8080 
http://localhost:5001

来源不同。

【讨论】：