c# - 405(方法不允许)并被 CORS 策略阻止

Question

我在客户端有基于 Angular(7.2.1) 的 UI 的 Asp.Net Core(3) WebApi 项目。
使用 Postman 或仅使用 URL 时，我可以使用 GET 和 POST 而不会出现任何特定错误。
当通过 Angular(Chrome\FireFox\IE Browser) 尝试相同的操作时，我收到以下错误。
zone.js:3243 OPTIONS http://localhost:8888/api/PaymentDetails 405 (Method Not Allowed)ccess to XMLHttpRequest at 'http://localhost:8888/api/PaymentDetails' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我将尝试分享尽可能多的代码来演示流程。

WebApi Startup.cs:

公共(public) IConfiguration 配置 { 获取； }

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{

    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder =>
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader()

                );
    });
    services.AddControllers()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
            options.JsonSerializerOptions.PropertyNamingPolicy = null;
        });

    services.AddDbContext<PaymentDetailContext>(options => options.UseSqlServer("Server=DESKTOP-KT0N2RN\\SQLEXPRESS;DataBase=PaymentDetailDB;Trusted_Connection=True;MultipleActiveResultSets=True;"));

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{


    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    app.UseCors("CorsPolicy");
}

WebAPi GET method:

[HttpGet]
public async Task<ActionResult<IEnumerable<PaymentDetail>>> GetPaymentDetails()
{
    return await _context.PaymentDetails.ToListAsync();
}

Client Side:

rootUrl: string = "http://localhost:8888/api";

getPaymentDetail()
{

    console.log(`${this.rootUrl}/PaymentDetails`)
    const headers = new HttpHeaders().set('Content-Type','application/json');
    // headers.append('Access-Control-Allow-Origin', '*');
    // headers.append('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept');
    return this._http.get(`${this.rootUrl}/PaymentDetails`,{headers:headers});
}

Answer 1

我认为在 Startup 中更改以下内容Configure应该管用。注意顺序:根据文档

With endpoint routing, the CORS middleware must be configured to execute between the calls to UseRouting and UseEndpoints. Incorrect configuration will cause the middleware to stop functioning correctly.

app.UseRouting();

app.UseAuthorization();

app.UseCors("CorsPolicy");

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

我认为对 COR 的快速总结可能有助于解释为什么 postman 请求对您有用。

默认情况下，CORS 在浏览器中用于检查哪些源服务器将接受来自的请求。

如果您对服务器的请求来自同一个来源(来源的所有部分必须匹配)，您的 CORS 请求不会失败，因为它不是跨来源的。在您的情况下，端口不匹配，因此即使服务器和 Web 应用程序都从您的本地主机运行，它也算作跨源，因为端口不匹配

当您发送请求时，浏览器将首先发送选项请求(预检请求)，该请求将显示支持的支持方法并检查您的源(您的前端 Web 应用程序)是否有权向服务器发送请求。默认情况下，此功能内置于大多数主要浏览器(Chrome、Firefox、Edge 等)。

您的 postman 请求有效，因为 postman 不发送预检请求。

进一步阅读:

启用 CORS

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

什么是 CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS