Solving CORS issue became easy

// If you don’t have time just jump to the last section – takeaway. If you do that solving CORS issue will be easy.

CORS stands for cross origin resource sharing. Let me use a simple example to explain the basics.
Say that you have a web site http://foo.com and it has a client side javascript which uses AJAX to call http://bar.com to get some info. That is a CORS request. To make the request successfully the server needs some change to allow CORS requests.

What is considered cross origin? Use http://foo.com as an example the below urls are considered as different origins.
Https://foo.com (different scheme)
Https://foo.com:8080 (different port)
Https://api.foo.com (different subdomain)
Https://bar.com (different domain)

In some cases a complaint browser may send a preflight request before it allows the request to be sent. Let me use a real case to explain.
Scenario: Client side uses token authentication to get info from server side

1. The client side javascript sends a POST request to https://localhost:44300/Account with token (basically http header “Authorizattion”:”Bearer aAbdkkixlkid…”)

2. The browser determines a preflight request is needed and it sends preflight request
3. The server has to respond with status code 2XX AND with required headers. In this case Access-Control-Allow-Origin cannot be *. Access-Control-Allow-Headers has to contain Authorization.
4. The browser then sends the actual request.

preflight request

actual_request

Actual request

preflight_request

Takeaway

I spent a lot of time solving my particular case and read tens of links. In the end it I found that it could be much simpler and quicker if I knew the below two things.
1. Read just one link https://msdn.microsoft.com/en-us/magazine/dn532203.aspx
2. Do check the console message when useing developer tools in browser. I didn’t check the console message. Otherwise it could have saved me a lot of time. The below is a screenshot from Chrome. It tells exactly what went wrong. It makes trouble shooting much easier.

chrome_console

Big Bonus if you are using ASP.NET Web API

Web API presents a unique challenge that the “/Token” service is different from the normal Web API controllers and the nuget cors package only works for web API. Some people suggest adding the below in web.config. It will work for “/Token” service but NOT web api especially when you are using https. The chrome browser does not allow “*” in Access-Control-Allow-Origin.

<add name=”Access-Control-Allow-Origin” value=”*” />

The solution is adding the below code at the top in IdentityConfig.cs.

if (string.Equals(context.Request.Uri.PathAndQuery, “/Token”, StringComparison.OrdinalIgnoreCase))
{
context.Response.Headers.Add(“Access-Control-Allow-Origin”, new[] { “http://foobar.com” });
}

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s