Angular and WebApi Cors Request from origin has been blocked by CORS policy

We used to have something like this in web.config.

<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer> 

If I recall correctly, you need to set below to allow ASP.NET app to receive and handle OPTION.

<system.webServer> <handlers> <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> <remove name="OPTIONSVerbHandler" /> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> </handlers> </system.webServer> 

all details are in this article. https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Are you sure that this port is the one that the server listens to?

I had a similar scenario not that long ago (but with java and Jboss), where the api-url's port and the listening port were different.

In my case:

• Api-url's port: 8080
• Listening port: 9990

So I had to set the proxy this way:

{ "/api/*": { "target": "http://localhost:9990", "secure": false, "logLevel": "debug" } }

I also recently experienced the same kind of issues while doing the same. I'm copying my MVC API code here to help you to resolve the issue. Kindly configure the same accordingly so that issue will be resolved.

WebApiConfig.cs file:

 public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.EnableCors(); config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } } 

web.config file (specific node webServer tag showed below)

<system.webServer> <modules> <remove name="FormsAuthenticationModule" /> </modules> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" /> <add name="Access-Control-Allow-Credentials" value="true" /> </customHeaders> </httpProtocol> <handlers> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> <!--<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />--> <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> <remove name="OPTIONSVerbHandler" /> <remove name="TRACEVerbHandler" /> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> </handlers> </system.webServer> 

Add Global.asax file below method (This call specifically for PUT,POST related OPTIONS call).

 protected void Application_BeginRequest(object sender, EventArgs e) { if (HttpContext.Current.Request.Headers.AllKeys.Contains("Origin") && HttpContext.Current.Request.HttpMethod == "OPTIONS") { // Response.AddHeader("Access-Control-Allow-Origin", "*"); // Response.AppendHeader("Access-Control-Allow-Methods", "*"); // Response.AddHeader("Access-Control-Max-Age", "8000"); Response.Flush(); } } 

If want to restrict in controller level add below decorator in your API controller.

 [EnableCors(origins: "http://locathost:4200", headers: "*", methods: "*")] public class AssetsController : ApiController 

Here's an update for ASP.NET Core 6. Solutions to previous versions are an awkward fit because web.config, startup.cs, and WebApiConfig are not included by default in an ASP.NET Core 6 project.

There is a new page in the docs that explains how to set up CORS. Enable Cross-Origin Requests (CORS) in ASP.NET Core. I just used the approach "CORS with named policy and middleware" and it worked! Here's the code sample from the docs that worked for me:

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins"; var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options => { options.AddPolicy(name: MyAllowSpecificOrigins, builder => { builder.WithOrigins("http://example.com", "http://www.contoso.com"); }); }); // services.AddResponseCaching(); builder.Services.AddControllers(); var app = builder.Build(); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseCors(MyAllowSpecificOrigins); app.UseAuthorization(); app.MapControllers(); app.Run(); 

On a side note, the solution in Sheno-Navy's comment worked by adding "htts://" to the origin. Here's the same code sample with Sheno-Navy's approach: var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(); // services.AddResponseCaching(); builder.Services.AddControllers(); var app = builder.Build(); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().AllowCredentials().WithOrigins("https://localhost:4200")); app.UseAuthorization(); app.MapControllers(); app.Run();