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

Posted 2023-03-04

【中文标题】即使在配置 ASP.NET Core Web API 中启用了 CORS，CORS 也会阻止发布请求

【英文标题】：CORS blocking post request even though CORS is enabled in configuration ASP.NET Core Web API

【发布时间】：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。

【参考方案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 

来源不同。