CORS

what is it and what you need to know

Eve Reichmann

Published in

Dev Genius

4 min readOct 13, 2020

Important Terms

Origin is described by the protocol, host, and URL.

same origins :

http://example.com/app1/index.html
http://example.com/app2/index.html

different origin schemes:

http://example.com/app1
https://example.com/app2

different origin hosts:

http://example.com
http://www.example.com
http://myapp.example.com

different origin ports:

http://example.com
http://example.com:8080

CORS- cross-origin resource sharing allows the sharing of data from external origins if permitted.

SOP- same-origin policy only allows sharing of content if the origin is the same scheme/protocol, host, and port number.

AJAX- Asynchronous JavaScript And XML is a request that happens client-side where a web application can send and receive data without interfering with the loaded content or behavior.

What Came First

In the infancy of the internet, the first protocol adopted in 1995 was the same-origin policy by Netscape. SOP is still used today as a security feature to help protect sites from unauthenticated sessions. An example would be a user logged into their bank account, left the page, and didn’t log out. That user goes to a malicious website that is running Javascript code in the background. With SOP that site will not be able to get any information from the bank's website. If no SOP was used that Javascript code could get that users' banking information, list of transactions, or even create a new transaction.

SOP became problematic when websites started to become larger. Workarounds were made to help SOP be more dynamic like data tainting, document.domain property, JSONP, WebSockets, and a few others. This is where CORS arrived on the scene.

2004

Matt Oshry, Brad Porter, and Michael Bodell proposed cross-origin support. They were working on VoiceXML which is a computer and human voice interactive media and dialogs. They needed to be able to share media between browsers. The first work draft of CORS was submitted in 2006 but was finally recommended in 2014. Cors is the modern alternative to JSONP. JSONP only allowed for HTTP GET requests, didn’t handle errors well, and not very secure.

Using CORS

When a user goes to a webpage and the page does a cross-origin fetch. Lets say makes a fetch request to an API. The browser will attempt to send a GET request with an extra origin HTTP header containing the domain that served the parent page. The server may respond in one of two ways.

1.The requested data and the header Access-Control-Allow-Origin requests from the origin are allowed. This can be a wild card

Access-Control-Allow-Origin: *

that essentially makes the content completely public for everyone to use including code from that servers site on any site. An example of this is Google Fonts.

Access-Control-Allow-Origin: http://example.com

this second example means that only websites at this origin have access to this data. Making the request data more private.

2. If the page does not allow for cross-origin requests or no Access-Control-Allow-Origin was declared a CORS error will be sent back with the promise that looks like this:

Getting around CORS errors

There are three different ways to solve a CORS error.

Add a chrome extension

The quickest fix is to add a chrome extension called Moesif Origin & CORS Changer. The issue here is this is only good for development but will only work in your chrome browser. If you are looking for a quick way to see if you can get the data this definitely is a good option. Though long term you are going to want to look into a different option.

2. Using a proxy

A proxy is a server that acts as a gateway between your browser and the endpoint server. There is an open-source proxy server called cors-anywhere that adds the CORS headers to a request. It is super simple to use and you can even create your own Heroku application with the source code. All you need to do is add https://cors-anywhere.herokuapp.com/ to the front of the URL you are sending the request too.

https://cors-anywhere.herokuapp.com/{add source url here}

The nice thing is this works for development and production in the application and nothing needs to be changed. One downside is Heroku applications can have a be a bit of a delayed response.

3. Build your own proxy

Google has great documentation on adding proxy script into multiple coding languages here.

Conclusion

CORS errors can be frustrating but when you understand where they came from and that they allow us as developers to share data and grow the internet it makes them just a little less frustrating. Imagine if we still worked with SOP and had to build out sites with all the code we normally import in. Imagine how slow the internet would be. I know for myself learning the root of where technology comes from helps me understand its usefulness and develop an understanding of what's happening. Hopefully, CORS makes a little more sense to you. If there is another way to solve a CORS problem I would love to hear about it. Thanks for reading!