Solving CORS issue for WebAPI and Angular JS In Chrome Browser

I had taken up an new assignment of working with WebAPI and Angular JS 1.5.7. The application used to work only in the Internet Explorer but not in the Chrome browser.

Chrome browser is pretty advanced and hence debugging is easy. In total its easy to work on chrome brower rather than working on any (For Me- Strictly)

You need to understand CORS - What it is and what is the problem. To know more check this website.

https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

We were hosting the application in IIS. So the WEBApi was hosted on the port 7000 and the Angular JS Code was hosted on the 7709

So what You have to do to solve this issue.

In the Application Start add the below code.

        protected void Application_BeginRequest(Object sender, EventArgs e)

        {

            //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");

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");

                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");

                HttpContext.Current.Response.End();

            }

        }

And add the CORS plugin that you get in the Chrome app store.


Simple works :D