MVC Web API Angular App ('http://localhost:4200' has been blocked by CORS policy)

Question

I have been spending hours and hours about looking a way to enable my front end web app (Angular) to access my Asp.NET MVC (Controller) but it displays the following error:

Access to XMLHttpRequest at 'https://localhost:44344/Authentication/SignIn' 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.

Angular URL: http://localhost:4200/login?returnUrl=%2F

MVC URL: https://localhost:44344/

Here also what I have added to my web.config

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Content-Type" value="application/json"/>

    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

I have also added the following line to the main controller:

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

But the error es the same.

Here is the init of the controlles:

    [HttpPost]
    [AllowAnonymous]
    [DisableCors]
    public JsonResult SignUp(HF_Accnt_Access Company)

Can somebody help me out please.

Answer 1

Add below code into Register method in WebApiConfig.cs file inside App_start folder.

var cors = new EnableCorsAttribute(origins: "", headers: "", methods: "*");

config.EnableCors(cors);

Note : If you add any where any configuration for cross origin please remove from there. Ex : Remove from web.config file. Add below code.

    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute(origins: "*", headers: "*", methods: "*");
        config.EnableCors(cors);
        
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }