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

TF401189: The source branch has been modified since the last merge attempt

If you are using Visual Studio Online and setup your project using TFS doing a code review is straightforward in visual studio.

However ff you are using Visual Studio Online and setup your project Git you might wonder how you can conduct a code review. You may do a quick search and then try ‘new pull request’ . You might get a weird error message you don’t understand.

TF401189: The source branch has been modified since the last merge attempt

Then you do another search (bing or google) you won’t find anything useful.

After trial and error I found that the root cause is that I didn’t use a topic branch. It is that simple.

Two useful links as below

https://www.visualstudio.com/get-started/code/git/pullrequest
https://blogs.msdn.microsoft.com/visualstudioalm/2014/06/10/conduct-a-git-pull-request-on-visual-studio-online/ (unfortunately all the images are missing)