405 (Method Not Allowed) and blocked by CORS policy

Question

I have Asp.Net Core(3) WebApi project with UI based on Angular(7.2.1) on Client side. When using Postman or just using the URL I can use GET and POST without any particular errors. When trying the same by Angular(Chrome\FireFox\IE Browser) I'm getting the following errors.

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.

I'll try to share as much as code I can to demonstrate the flow.

WebApi Startup.cs:

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.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});
}

check this answer https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core — Muhammed Albarmavi, Jan 28 '20 at 09:29
I updated my answer, hopefully it will properly solve your problem now — Kevin, Jan 28 '20 at 10:04
yep.one of the answers here helped me to fix it. `app.UseCors()` must be before app.UseMvc(); — JumpIntoTheWater, Jan 28 '20 at 10:12

Kevin · Accepted Answer · 2020-01-28T10:02:41.597

I think changing the following in Startup Configure should work. Note the order: as per the docs

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();
});

I think a really quick summary of CORs might be helpful to eexplain why postman requests were working for you.

CORS is used in browsers by default to check which origins servers will accept requests from.

if your request to the server was from the same origin (all parts of the origin must match) your CORS request would not fail because its not cross origin. In your case the ports to not match so even though both the server and web app are running from your localhost, it counts as cross origin because the ports don't match

When you send a request the browser will first send an Options request (a preflight request) which will show supported supported methods and check if your origin (your front end web app) has permission to send requests to the server. This functionality is built into most main browsers by default (Chrome, Firefox, Edge etc).

Your postman request works because postman does not send a preflight request.

Further reading:

Enabling CORS

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

What is CORS

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

the issue was that I used `app.UseCors()` after `app.UseMvc` — JumpIntoTheWater, Jan 28 '20 at 10:14
glad you got it working. app.UseMvc(); wasn't in the snippet so I left it out when I mentioned order. Useful tip: Always call app.UseMvc(); last, it will help save middleware headaches — Kevin, Jan 28 '20 at 12:32

score 0 · Answer 2 · answered Jun 23 '22 at 15:27

Sometimes it occurs because of WebDAVModule.

<system.webServer>
  <modules runAllManagedModulesForAllRequests="false">
    <remove name="WebDAVModule" />
  </modules>
</system.webServer>

https://www.ryadel.com/en/error-405-methods-not-allowed-asp-net-core-put-delete-requests/

405 (Method Not Allowed) and blocked by CORS policy

2 Answers2

Linked