在 C# 和 Angular 之间启用预检 CORS

Question

我正在尝试使 CORS 为需要预检检查的请求工作。 在这种情况下，我使用额外的 header 向后端发出 POST 请求。

Angular：

  let myHeaders = new HttpHeaders();
    myHeaders = myHeaders.append('Content-Type', 'application/json');
    return this.http.post<UserOrder>(`${this.apiURL}/Order/PlaceOrder`, JSON.stringify(payload), {headers : myHeaders});   //email); 

C# API：

[HttpPost("PlaceOrder")]
        public GenericResponse PlaceOrder(UserOrderInsertModel userOrder) 
        {
            return _orderProvider.PlaceOrder(new UserOrder());
        }

由于预检检查，它首先发出一个 OPTIONS 请求。 当我没有在后端定义单独的选项端点时，我得到一个 405 Method Not Allowed。 这让我觉得我需要一个单独的 options-endpoint 在我的后端在 post-endpoint 之上。

[HttpOptions("PlaceOrder")]
        public ActionResult PlaceOrderOptions(UserOrderInsertModel userOrder)
        {
            return Ok();
        }

添加后，我遇到了 415 Unsupported Media Type（在选项调用中）。 这可能是因为 HttpOptions 请求不支持 Content-Type header。

我觉得根本不需要额外的选项端点。 我目前使用的CORS-middleware如下：

httpContext.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:4200");
httpContext.Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS");  
httpContext.Response.Headers.Add("Access-Control-Allow-Headers", "*");
httpContext.Response.Headers.Add("Access-Control-Allow-Credentials", "true");

额外信息：CORS 通常已经工作了。 带有 GET 请求和 Access-Control-Allow-Origin header 的跨站点脚本运行良好。 只是我无法让 POST/OPTIONS 组合工作。

编辑：在 Startup.cs 我首先尝试使用 app.UseCors() 如下：

app.UseCors();
    options => options.WithOrigins("http://localhost").AllowAnyMethod()
);

不幸的是，这不起作用，所以我求助于如上所述插入中间件。

任何帮助将不胜感激！

Answer 1

确保在 UseEndpoints() 之前调用 UseCors()。 另一个提示：如果您有凭据，则通配符不会按预期工作。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

Answer 2

好的，非常感谢大家。 问题很可能出在我使用的中间件上。 这是我添加的一种解决方法，因为 UseCors() 最初不起作用。 这可能是因为我最初没有使用 app.AddCors()。 如果没有自定义中间件，一切都会变得容易得多！

Answer 3

快速查看文档将澄清一些事情。 我在下面分享一些摘录

由于预检检查，它首先发出一个 OPTIONS 请求。 当我没有在后端定义单独的选项端点时，我得到一个 405 Method Not Allowed。 这让我觉得我需要一个单独的 options-endpoint 在我的后端在 post-endpoint 之上。

预检请求

对于某些 CORS 请求，浏览器会在发出实际请求之前发送一个额外的 OPTIONS 请求。 该请求称为预检请求。 如果以下所有条件都为真，浏览器可以跳过预检请求

• 请求方法是 GET、HEAD 或 POST。
• 除了 Accept、Accept-Language、Content-Language、Content-Type 或 Last-Event-ID 之外，该应用不会设置请求标头。
• Content-Type header（如果设置）具有以下值之一：application/x-www-form-urlencoded multipart/form-data text/plain

我觉得根本不需要额外的选项端点。

除了使用带有端点路由的 CORS 外，ASPNET Core 应该在启动时启用内核时响应适当的预检请求。

自动预检的条件

当应用 CORS 策略时：

• 通过在 Startup.Configure 中调用 app.UseCors 来全局调用。
• 使用 [EnableCors] 属性。

ASP.NET 内核响应预检选项请求。

使用 RequireCors 在每个端点上启用 CORS 目前不支持自动预检请求。

在启动时启用 Cors

在配置服务中

 public void ConfigureServices(IServiceCollection services)
    {
        .
        //other codes
        .
    services.AddCors(options =>
        {
            options.AddDefaultPolicy(
                builder => //check corsbuilder for additonal config
                {
                    builder.WithOrigins("http://example.com",
                                        "http://www.contoso.com;
                });
        });
        .
        //other codes
        .
    }

并在配置方法中

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        .
        //Other codes
        .

        app.UseCors();

        .
        //Other codes
        .
    }

此处为 3.0 https 的完整文档：//docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0#ecors

Answer 4

启用 Cors 并确保 AllowAnyHeader 和 AllowAnyMethod Using.Net Core

  services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
                {
                    builder.WithOrigins(Configuration.GetValue<string>("JwtConfig:corsWhiteListUrl"))
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
        });