Angular 6 .Net core 2.2 App 中的 Cors 错误答案

【问题标题】：Cors error in Angular 6 .Net core 2.2 AppAngular 6 .Net core 2.2 App 中的 Cors 错误
【发布时间】：2019-08-04 21:24:27
【问题描述】：

我已经开发了 .Net Core MVC (angular) 应用和 .net core Api 应用

在这两个应用程序中，我都在 Web 应用程序和 api 中启用了 CORS

.Net Core

 services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });
// in Configure

    app.UseCors("CorsPolicy");

角度

对于所有 Get 和 Post 添加如下标题

get(url: string, options?: any) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Accept', 'applcation/ json');
    options = { headers: headers };
    const _url = this.webapiurl + url;
    return this.http.get(_url, options);    
  }

仍然面临 CORS 错误

Access to XMLHttpRequest at 'http://etestservice.qa.com:5003/QA/api/test/GetDetails?email=abc@gmail.com' from origin 'http://etestweb.qa.com::5002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

【问题讨论】：

你应该在app.UseMvc(); 和其他app.Use... 调用之前调用app.UseCors("CorsPolicy");
您不需要客户端上的headers.append('Access-Control-Allow-Origin', '*'); 标头...您应该将其作为服务器响应的一部分接收
CORS 错误可能是众所周知的“误报”。换句话说，您的服务器代码中出现异常 - 但在浏览器中它显示为 CORS 错误。检查您的服务器日志文件是否有异常！另外 - 看看 F12 网络选项卡 - 你在 API 调用中得到了什么？

标签： c# angular cors asp.net-core-mvc asp.net-core-2.0

【解决方案1】：

在startup.cs文件中

public void ConfigureServices(IServiceCollection services)
{
        services.AddMvc();

        // app settings configuration.
        services.AddCors(options =>
        {
            // this defines a CORS policy called "default"
            options.AddPolicy("AllowSpecificOrigin", policy =>
            {
                var corsUrlSection = Configuration.GetSection("AllowedOrigins");
                var corsUrls = corsUrlSection.Get<string[]>();
                policy.WithOrigins(corsUrls)
                    .AllowAnyHeader()
                    .WithExposedHeaders("X-Pagination") // add any customer header if we are planning to send any 
                    .AllowAnyMethod();
            });
        });

}



public void Configure(IApplicationBuilder app, IHostingEnvironment environment, ILoggerFactory loggerFactory)
{

        app.UseExceptionMiddleware();

        // Use HTTPS Redirection Middleware to redirect HTTP requests to HTTPS.
        app.UseHttpsRedirection();

        app.UseCors("AllowSpecificOrigin");

        app.UseMvc();

}

在 API 中，

[EnableCors("AllowSpecificOrigin")]
public class Controller
{
   // code...
}

中间件组件的顺序是必须的。所以检查一下。我在这里附上了我的项目代码。

【讨论】：

【解决方案2】：

在控制器上方添加[EnableCors("CorsPolicy")] 属性

也可以参考这个How to enable CORS in ASP.NET Core

【讨论】：

【解决方案3】：

我的 startup.cs 文件：

    services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
    {
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader();
    }));

//In configure
        app.UseHttpsRedirection();
        app.UseMvc();
        app.UseCors("MyPolicy");

您需要在控制器类中启用 cors，如下所示。

[Route("api/[controller]")]
    [ApiController]
    [EnableCors("MyPolicy")]
    public class controllerName : ControllerBase
    {
// class boby

}

它非常适合我。

【讨论】：

【解决方案4】：

可能 Web api 没有正确处理预检请求（HTTP VERB - OPTIONS）。

Microsoft.AspNetCore.Cors

将允许您使用内置功能执行 CORS，但它不处理 OPTIONS 请求。到目前为止，最好的解决方法是按照上一篇文章中的建议创建一个新的中间件。检查以下帖子中标记为正确的答案：

Enable OPTIONS header for CORS on .NET Core Web API

【讨论】：