在启动中启用 CORS 失败并出现预检错误

Question

我正在尝试在 Startup.cs 中启用 CORS，但没有成功。我在端口 4200 上有一个 Angular 应用程序，试图与我的 c# Web 应用程序通信。我在 Angular 中不断收到此错误

无法加载 http://localhost:52008/Account/GetJWT：预检响应没有 HTTP ok 状态。

我的研究似乎表明 CORS 未正确启用。知道我错过了什么吗？

public void ConfigureServices(IServiceCollection services)
{
.....
    services.AddCors(options =>
    {
        options.AddPolicy("EnableCORS", builder =>
        {
            builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()
            .Build();
        });
    });
    .........
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
.......
 app.UseCors("EnableCORS");
 ........
 }

这是 Angular POST 请求：

  login(form: NgForm) {
    let credentials = JSON.stringify(form.value);
    console.log(credentials);
    this.http.post("http://localhost:52008/Account/GetJWT", credentials, {
      headers: new HttpHeaders({
        "Content-Type": "application/json"
      })
    })
  }

POSTMAN 查询结果

Answer 1

使用以下代码启用 CORS。 .NET Core 版本：2.1 和 Angular 版本：1.6.7

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)
    {
        services.AddMvc()
            .AddJsonOptions(options =>
        {
            options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
            options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.None;                
        });

        services.AddCors();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider serviceProvider)
    { 
        app.UseCors(options =>
        {
            options.AllowAnyMethod();
            options.AllowAnyOrigin();
            options.AllowAnyHeader();
        });

        app.UseMvc();
    }   
}

角度代码：

$http.post("http://localhost:52008/Account/GetJWT", credentials,{
    headers: new HttpHeaders({
        "Content-Type": "application/json"
})).then(
function(response) {
    console.log(response);
},
function() {
    console.log("unable to login");
});

如果问题仍然存在，请告诉我。

Answer 2

     public void ConfigureServices(IServiceCollection services)
        {
           //add cors service
            services.AddCors(options => options.AddPolicy("Cors",
                builder => {
                    builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
                } ));

            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();
        }
        app.UseCors("Cors");//------>let app use new service
        app.UseMvc();

    }

在你的控制器内部，确保你从身体上抓取物体

//发布请求

 [HttpPost]
    public Message Post([FromBody] Message message)
    {

    var msg = new Message { Owner = message.Owner, Text = message.Text };
    db.Messages.AddAsync(msg);
    db.SaveChangesAsync();

    return message;

}

Answer 3

您可以像下面这样在 startup.cs 中配置核心并将源添加到 ConfigurationServices 中，如下所示。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin",
            builder => builder.WithOrigins("http://example.com"));
    });
}

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

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    // Shows UseCors with named policy.
    app.UseCors("AllowSpecificOrigin");

    app.Run(async (context) =>
    {
        await context.Response.WriteAsync("Hello World!");
    });
}

将 CORS 策略添加到特定操作。

[HttpGet]
[EnableCors("AllowSpecificOrigin")]
public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

参考：Enable Cross-Origin Requests (CORS) in ASP.NET Core

Answer 4

更改为您的 web.config：

<system.webServer>

    ...

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" />
        <add name="Access-Control-Allow-Credentials" value="true" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
</httpProtocol>
</system.webServer>