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

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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

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

Thanks.

Method 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.

Method 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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0