How do you enable CORS(Cross Origin Resource Sharing ) on ASP.NET Core Web API

Error Description:- XMLHttpRequest cannot load http://localhost:50913/api/values. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200′ is therefore not allowed access.

Use Case: Posting the data from Angular 4 form  http://localhost:4200  to ASP.NET Core Web API http://localhost:50913/api/values

Solution:- For resolving the CORS (Cross Origin Resource Sharing ) issue  CORS needs to be enabled on Web API. No action required on Angular 4 form.

Add the below highlighted code in Startup.cs

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

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseCors(b => b.WithOrigins("http://localhost:4200").AllowAnyHeader().AllowAnyMethod());
    app.UseMvc();
}
Microsoft Reference for Enabling Cross-Origin Requests (CORS) Click Here 

Add Comment