Explain y Example: CORS

Disclaimer: This content is not officially endorsed by Microsoft.

// Comments and feedback are highly appreciated.

Earlier this year, when I was working on 'Project Recycle' (the trash detection system), I came across Cross-Origin Resource Sharing (CORS) issues and let me tell you, struggling for days only to find out that the solution was to set "Access-Control-Allow-Origin" to "*" (wildcard) was not fun. So, I've decided to share what I learnt about CORS here.

To understand what CORS is, we need to start with same-origin policy. To understand same-origin policy, we need to go back to the basics of the internet.

In the world of web (or the internet), communication is generally done using HTTP (Hypertext Transfer Protocol). Think of HTTP as the common language that you and your family or friends have all agreed to learn so that you can communicate with each other. Except in the HTTP language, you have to start all your communication with the following words: GET, POST, PUT, DELETE, HEAD, CONNECT, OPTIONS, TRACE, PATCH.

I like to think of GET and POST as the hipster words because they are more commonly used. So a communication between you and your friend could go something like this:

You: "GET this thing for me."

Friend: "200 Ok, here it is."

or

You: "POST this thing for me."

Friend: "200 Ok, I've posted it for you."

In this case, you are the client and your friend is the server. You are requesting your friend to do something for you and your friend will respond with whether or not they have done it.

What's up with the 200?

That's the response code (HTTP status code). Status codes are usually categorized into 100's, 200's, 300's, 400's, and 500's.

100's are usually informational codes, 200's are success codes, 300's are usually redirecting you to somewhere, 400's are error codes from you (client), 500's are error codes from your friend (server).

Generally, when you request something from your friend, you would probably give them a bit more information than just "this thing" and this is where URLs (uniform resource locators) comes in. I'm sure you know of or have least seen a URL before. Think of URLs as very specific instructions that you give your friend so they can help locate something for you.

The format of URL is usually something like:

URL: 
[url scheme]://[hostname]:[port]/[path]?[query]

URL example: 
[https]://[www.library.com]:[123]/[techology]?[title=ExplainByExample]

Let's say you have a friend who works at the library and will process special requests for you.

You send your friend:

"https://www.library.com:123/technology?title=ExplainByExample"

Your friend sees this and they know that your instructions are: Go to the library secretly, go into room 123, find the technology section and find the book called "Explain By Example" and return it to you.

Your friend does all this for you because they trust that you won't give their secret away (the secret of sneaking into the library after hours and processing special requests for their friends).

If your friend received any of these requests:

• https://www.library.com:123/technology?title=ExplainByExample
• https://www.research.com/technology?title=ExplainByExample
• https://www.library.com/technology?title=ExplainByExample

They would not process it.

Why?

Because they know the request didn't come from you. The first one is using a non-secure protocol (HTTP instead of HTTPS). The second is telling them to go to the Research building instead of the Library building altogether. The third request doesn't specify which room the book is in.

In the web world, your friend is simply following the same-origin policy to keep themselves safe (because processing requests for strangers might expose their crimes).

But in the real world, you don't just have friends that you can use, you also have mutual friends that you can use. And that is kind of what cross-origin resource sharing (CORS) is.

Let's say you're going on a holiday to Amsterdam. You are a bit of a budget traveler and don't want to pay for accommodation fees. You have a friend in Amsterdam and know they have a spare bed for you to sleep on so you send them a message and ask, "Hey, I'm coming to visit for a holiday, can I stay with you?"

Your friend has already planned a trip to Melbourne around the same time and so they respond with, "I won't be here when you are visiting but you can stay with my friend."

They pass your request onto their friend (or your mutual friend) and gives you permission to reach out to the mutual friend. So when you reach out to the mutual friend, they can identity that you can be trusted.

Th permission in this case is set by the header:

Accesss-Control-Allow-Origin: www.you.com

And then you reach out to the mutual friend and ask, "Hey, my friend said I could come and stay with you while I'm visiting."

To which they would respond with, "Sure thing, any friend of a friend is a friend of mine."

In web language, your friend is essentially a server that lives in one domain which grants you the permissions to ask for resources from their friend who lives in another domain (another household).

Anyway, this is a massive post to say that you can easily enable CORS in App Service and in .Net Core by following those tutorials rather than spending days scratching at your head like I did.

P.S: If you want to support Explain by Example, you can buy me a coffee here ?