Why I get CORS policy error when I send request from client?

Question

I sent request from angular project to web api .net cor 2.2.

And I get this error:

Access to XMLHttpRequest at 'http://localhost/fridge/api/FridgeType/3' 
from origin 'http://localhost:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Here is web.config file in my web api .net cor 2.2:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
    <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="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="bin\IISSupport\VSIISExeLauncher.exe" arguments="-argFile IISExeLauncherArgs.txt" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false" />
  </system.webServer>
</configuration>

Any idea what cause to error above?

Cause localhost and localhost:4200 are two different origins...you need to whitelist localhost:4200 on the api side. — Soumen Mukherjee, Nov 28 '19 at 01:18
Here is a good read on the subject: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.0 — R. Richards, Nov 28 '19 at 01:21
Please see this https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core — Soumen Mukherjee, Nov 28 '19 at 01:34

coder · Answer 1 · 2019-11-28T07:39:24.330

I grabbed a explanation to this from ASP.NET Core DOC also it has been mentioned by R. Richards as a comment

Browser security prevents a web page from making requests to a different domain than the one that served the web page. This restriction is called the same-origin policy. The same-origin policy prevents a malicious site from reading sensitive data from another site. Sometimes, you might want to allow other sites make cross-origin requests to your app. For more information, see the Mozilla CORS article.

I was able to fix it by using

app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().AllowCredentials());

in Configure method of Startup.cs like bellow code.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
     if (env.IsDevelopment())
     {
          app.UseDeveloperExceptionPage();
     }
     else
     {
         app.UseHsts();
     }

     app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().AllowCredentials());
     app.UseHttpsRedirection();
     app.UseMvc();
}

Why I get CORS policy error when I send request from client?

1 Answers1