Response to preflight request doesn't pass access control check (Angular2)

Question

I am getting below error on call to REST Web API in Asp.net.

XMLHttpRequest cannot load http://localhost:54859/api/PostData. 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:3000' is therefore not allowed access.

I am using Angular2 as Front end. In the back end, I have added following codes to enable CORS in WEB API.

 var corsAttr = new EnableCorsAttribute("*", "*", "*");
 config.EnableCors(corsAttr);

Everything works fine for Http get request,but the same not for Http Post request.

Any help would be appreciable

Thanks in advance!

Solution 1

I got it resolved by adding following lines to web.config.

<system.webServer>
   <modules runAllManagedModulesForAllRequests="true">
   </modules>
</system.webServer>

Thanks.

Solution 2

Adding Access-Control-Allow-Origin header for the preflight request during Application_BeginRequest in Global.asax.cs worked for me.

Global.asax/Global.asax.cs

protected void Application_BeginRequest(Object sender, EventArgs e)
    {
        // Preflight request comes with HttpMethod OPTIONS
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")            
        {
            HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");               
            // The following line solves the error message
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            // If any http headers are shown in preflight error in browser console add them below
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Pragma, Cache-Control, Authorization ");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }

After solving this issue, the application threw errors on browser console that certain headers are not mentioned in preflight response.

Once the headers were added to Access-Control-Allow-Headers header of the preflight response it got resolved.

Solution 3

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    // Preflight request comes with HttpMethod OPTIONS
        // The following line solves the error message
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")            
    {
        HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");               
        // If any http headers are shown in preflight error in browser console add them below
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Pragma, Cache-Control, Authorization ");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

This above code worked fine

Comments

[et3rnal]

Thanks, heaps, in my case I only needed the allow headers as using * was failing! so I just add this <add name="Access-Control-Allow-Headers" value="Content-Type, Accept, Pragma, Cache-Control, Authorization " /> to web.config