在 .NET Core Web API 上为 CORS 启用 OPTIONS 标头

Question

我在 Stackoverflow 上找不到解决方案后解决了这个问题，所以我在这里分享我的问题并在答案中分享解决方案。

使用 AddCors 在我的 .NET Core Web Api 应用程序中启用跨域策略后，它仍然无法在浏览器中运行。这是因为浏览器（包括 Chrome 和 Firefox）会首先发送一个 OPTIONS 请求，而我的应用程序只会以 204 No Content 响应。

Answer 1

在您的项目中添加一个中间件类来处理 OPTIONS 动词。

using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Hosting;

namespace Web.Middlewares
{
    public class OptionsMiddleware
    {
        private readonly RequestDelegate _next;

        public OptionsMiddleware(RequestDelegate next)
        {
            _next = next;
        }

        public Task Invoke(HttpContext context)
        {
            return BeginInvoke(context);
        }

        private Task BeginInvoke(HttpContext context)
        {
            if (context.Request.Method == "OPTIONS")
            {
                context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] });
                context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept" });
                context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" });
                context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });
                context.Response.StatusCode = 200;
                return context.Response.WriteAsync("OK");
            }

            return _next.Invoke(context);
        }
    }

    public static class OptionsMiddlewareExtensions
    {
        public static IApplicationBuilder UseOptions(this IApplicationBuilder builder)
        {
            return builder.UseMiddleware<OptionsMiddleware>();
        }
    }
}

然后将app.UseOptions(); this 添加为 Startup.cs 的 Configure 方法的第一行。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseOptions();
}

Answer 2

我知道它已得到答复。只是回答更新的信息。所以它会帮助别人。

它现在已内置到 ASP.NET Core 框架中。

只要关注https://docs.microsoft.com/en-us/aspnet/core/security/cors

替换

    app.UseCors(builder =>
   builder.WithOrigins("http://example.com"));

与

        app.UseCors(builder =>
       builder.WithOrigins("http://example.com")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials());

Answer 3

这对我有用：

请确保：

app.UseCors(builder => {
    builder.AllowAnyOrigin();
    builder.AllowAnyMethod();
    builder.AllowAnyHeader();
});

在以下任何一项之前发生：

app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseCookiePolicy();

请记住，我们正在处理“管道”。 cors 的东西必须放在第一位。

-gimzani

Answer 4

不需要额外的中间件。如上所述，唯一需要的是 Cors 配置中允许的 OPTIONS 方法。 您可以按照此处的建议 AllowAnyMethod：https://stackoverflow.com/a/55764660/11921910

但只允许这样的特定内容更安全：

app.UseCors(builder => builder
.WithOrigins("https://localhost", "https://production.company.com") /* list of environments that will access this api */
.WithMethods("GET", "OPTIONS") /* assuming your endpoint only supports GET */
.WithHeaders("Origin", "Authorization") /* headers apart of safe-list ones that you use */
);

某些标题总是被允许的： https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header

Answer 5

AspNetCoreModuleV2 OPTIONS 问题

.Net 核心模块不知道如何处理导致预检 CORS 问题的 OPTIONS，因此解决方案是将 OPTIONS 动词排除在其处理之外。它是通过将 * 替换为您想要的动词来完成的，除了 OPTIONS。不用担心，OPTIONS 动词会被默认加载的 OPTIONSHandler 处理：

IIS

解决方法：修改web.config

 <add name="aspNetCore" path="*" verb="* modules="AspNetCoreModuleV2" resourceType="Unspecified" />

把它变成这样：

<add name="aspNetCore" path="*" verb="GET,POST,PUT,DELETE" modules="AspNetCoreModuleV2" resourceType="Unspecified" />

IIS Express：适用于 Visual Studio 调试器

我尝试修改.vs\ProjectName\config\applicationhost.config 在文件的底部，但没有希望。因此，在这种特定情况下，您可以使用选择的答案。

Answer 6

我想为单个方法允许此操作，而不是使用中间件在任何方法上允许此操作。这就是我结束做的事情：

'OPTIONS' 方法的手动处理

[HttpOptions("/find")]
public IActionResult FindOptions()
{
    Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)Request.Headers["Origin"] });
    Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept" });
    Response.Headers.Add("Access-Control-Allow-Methods", new[] { "POST, OPTIONS" }); // new[] { "GET, POST, PUT, DELETE, OPTIONS" }
    Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });
    return NoContent();
}

[HttpPost("/find")]
public async Task<IActionResult> FindOptions([FromForm]Find_POSTModel model)
{
    AllowCrossOrigin();
    
    // your code...
}

private void AllowCrossOrigin()
{
    Uri origin = null;
    Uri.TryCreate(Request.Headers["Origin"].FirstOrDefault(), UriKind.Absolute, out origin);

    if (origin != null && IsOriginAllowed(origin))
        Response.Headers.Add("Access-Control-Allow-Origin", $"{origin.Scheme}://{origin.Host}");
}

当然，你可以随意实现IsOriginAllowed

private bool IsOriginAllowed(Uri origin)
{
    const string myDomain = "mydomain.com";
    const string[] allowedDomains = new []{ "example.com", "sub.example.com" };

    return 
           allowedDomains.Contains(origin.Host) 
           || origin.Host.EndsWith($".{myDomain}");
}

您可以在how to enable CORS for POST requests on a single endpoint找到更多详细信息

Answer 7

实际上，没有一个答案对我有用，但我终于弄清楚了问题所在，我不敢相信 我刚搬了app.UserCors("PolicyName"); 之前app.UseAuthorization(); 它开始工作了！

我认为这可能对某人有所帮助。

services.AddCors(options =>
{
  options.AddPolicy("EnableCORS", bl =>
  {
    bl.WithOrigins(origins)
      .AllowAnyMethod()
      .AllowAnyHeader()
      .AllowCredentials()
      .Build();
  });
});


..........................
app.UseAuthentication();
app.UseCors("EnableCORS");
.....
app.UseAuthorization();

Answer 8

我想针对我在本地测试 api 和客户端 Web 应用程序的具体情况给出具体答案。我知道这是一个较晚的条目，但 CORS 在 dot net core 中发生了很大变化，我想，像我这样的新手可能会从完整的帖子中受益。

对我来说，这是两个背靠背发生的问题。

1. CORS 拒绝错误
2. 以及 Firefox 上的 OPTIONS 问题（我认为 chrome 也会这样做）
3. 我的 API 也在运行 HTTPS
4. 网络应用没有 HTTPS
5. 它们都在本地运行，为了清楚起见再次提及。

首先，这是 public void ConfigureServices(IServiceCollection services)

        //lets add some CORS stuff 
        services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder => {
                builder.WithOrigins("http://localhost:3000",
                                    "http://www.contoso.com");
                builder.AllowAnyMethod();
                builder.AllowAnyHeader();
                builder.AllowCredentials();
            });
        });

然后，这个，去，public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

  app.UseCors();

Answer 9

欢迎。

[HttpOptions("/find")] public IActionResult FindOptions()

{
    Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)Request.Headers["Origin"] });
    Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept" });
    Response.Headers.Add("Access-Control-Allow-Methods", new[] { "POST, OPTIONS" }); // new[] { "GET, POST, PUT, DELETE, OPTIONS" }
    Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });
    return NoContent();
}`enter code here`