无法在 ASP.Net Core web api 中启用 CORS

Question

我创建了一个带有单个控制器的 ASP.Net CORE Web API 项目，现在想从客户端 (React) Web 应用程序调用它。

但是，调用失败，并显示“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”。

从 Fiddler 调用同一个端点时，预期的响应标头不存在。

感谢 ATerry，我有了更深入的了解：标头不存在，因为 React Web 应用程序和 .Net Core Web API 托管在同一个盒子上。React 填充与 (API) 框相同的请求 Origin: 标头，因此服务器（非常聪明）不会添加 Allow-... 响应标头。然而，React 应用程序拒绝响应，因为缺少这些标头。

我正在使用 .Net Core v2.1（在撰写本文时最新）。

我构建的代码基于

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1

我检查了这些

https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas

.NET Core 中的 CORS

如何在 ASP.NET Core 中启用 CORS

...但没有一个建议奏效。

有任何想法吗？

这就是我配置 .Net Core 应用程序的方式（代码从实际更改为尝试并允许任何操作）：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        // Enable CORS (Cross Origin Requests) so that the React app on a different URL can access it
        // See https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1
        services.AddCors(options =>
        {
            options.AddPolicy(Global.CORS_ALLOW_ALL_POLICY_NAME, builder => builder
                .AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials());
        });

        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseCors(Global.CORS_ALLOW_ALL_POLICY_NAME);

        app.UseHttpsRedirection();
        app.UseMvc();
    }
}

仅通过上述方法就失败了，我也将 CORS 属性添加到了控制器类和控制器方法中：

[Route("api/[controller]")]
[ApiController]
[EnableCors(Global.CORS_ALLOW_ALL_POLICY_NAME)]
public class DealsController : ControllerBase
{
[...]
[HttpGet]
    [EnableCors(Global.CORS_ALLOW_ALL_POLICY_NAME)]
    public ActionResult<List<Deal>> GetAll()
    {
        return Store;
    }
}

我得到的响应标头：

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Kestrel
X-Powered-By: ASP.NET
Date: Thu, 06 Sep 2018 12:23:27 GMT

缺少的标题是：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000

Answer 1

我相信它也可以与 LOCALHOST 托管一起正常工作，只需进行以下更改并删除和任何额外的更改/配置。

替换这个：

        // Enable CORS (Cross Origin Requests) so that the React app on a different URL can access it
    // See https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1
    services.AddCors(options =>
    {
        options.AddPolicy(Global.CORS_ALLOW_ALL_POLICY_NAME, builder => builder
            .AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials());
    });

有了这个：

services.AddCors();

并替换这个：

app.UseCors(Global.CORS_ALLOW_ALL_POLICY_NAME);

有了这个：

app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

笔记：

• 即使您的 Web Api 和 React 应用程序配置在 LOCALHOST 上，也不意味着它们来自同一来源，这是因为它们托管在不同的端口上，例如 react 应用程序托管在 LOCALHOST:3000 上，而 Web Api 托管在 LOCALHOST:5000 上。如果客户端（反应应用程序）从不同的端口请求，Web api 会抱怨。

• 以上 Web Api 代码将允许任何 ORIGIN，而在生产应用程序中这并不安全，因此您需要允许特定 ORIGIN 到 CORS 访问。