What is CORS? A front-end perspective

You might be developing a front- end application and be met with a rather upsetting error. Let us stop that.

When you’re met with a rather nasty message, in this case:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

You can’t just leave it.

In this case, because your API call (or whatever it is that you were trying to do) is essential to the functioning of your App.

Best read on to see what this is all about, and how you can solve this potentially annoying problem.

Image for post
Image for post

Difficulty: Beginner | Easy | Normal | Challenging

Terminology

API: Application programming interface. A set of accessible tools for building software applications

HTTP Request: A packet of information that one computer sends to another computer to communicate with it

CORS: Cross-Origin Resource Sharing. A mechanism that aims to allow your requests while blocking requests made by rogue code when you make HTTP requests

Origin: The protocol, host and port number of a resource

Script: A program which is carried out by another programmer

SOP: Same Origin Policy. A security measure to protect the confidentiality and integrity of information

Web Browsers: An application to access and view websites

The Error

You’re developing your Front-end App (mobile, React or whatever). You access a resource and get the following error:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Oh dear!

This is the error, problem or opportunity (depending on your outlook) to be faced, and this is the article to help you out!

The cause(s) of this error

Please note: this isn’t necessarily an error! The warnings are to protect your user and you need to be aware that trying to “get around” or “turn off” protections is not usually the right approach (although that is one of the options below.

But first we need to understand what a Same-origin policy is and why it is implemented.

Same-origin?

Same-origin as a policy is restrictive, but it is an implementation of your host Web Browser. Implemented under the web application security model, the Web Browser only permits Scripts contained in a web page to access data in a second web page if and only if they have the same origin.

So, a hosted resource can only interact with other resources that are hosted on the same server, that is they have the same origin. Origin is defined as being the same protocol, host and port number.

The example

Image for post
Image for post

So if you have a frontend application at http://studeapps.comand an API at https://api.studeapps.com:3001 the origin between the two is different, and we would not be able to access the API and get an upsetting message and the request is rejected:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Oh dear!

So what is happening is arequest for a resource outside of the origin is a cross-origin request. CORS manages this process and the browser enforces this. Imagine you want to use an image on another server. Well Cross-origin embedding is usually allowed so at least there is that.

Solutions to same-origin (if you want access to the resource)

Host resources on with the same origin

Give your front-end resource access to everything with the same origin. Yes, host all of your images, databases and API's locally.

Image for post
Image for post

It will, of course work. But having the API copied across the browser for each and every user? This is NOT the best solution in almost every case.

Make the browser accept resources without the header

You can just turn off the security in Google’s Chrome browser.

This is fine during development, but please do NOT think about running this on a user’s computer. Cors is implemented to protect the user, which means there is no reason to turn this security off unless you are very, very sure about the consequences of doing so.

The policy is to protect the end user.

The theory is that without SOP, any web page would be able to access the DOM of any other page, and potentially access sensitive data AND perform actions of other web pages.

On the PC:

1. Right-click on the desktop and add a new shortcut
2. Add the following target "[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

On the Mac:

1. Open Spotlight with Command-Space
2. Type Terminal
3. open -a Google\ Chrome --args --disable-web-security --user-data-dir

On the Mac you may also use Automator to make this process a little easier (guide HERE)

Please, though, remember. You should only turn this off on your machine. Encouraging your users to do so creates security problems for them (and you really don’t want to cause problems for your users!).

Ask for the headers to be added

Although Web browsers enforce the same-origin policy servers can implement the Access-Control-Allow-Origin header on the response. This can be for all requestors or there can be a whitelist operation.

This is great! But how can you do this if you don’t have access to the server. If you don’t have access to a third-party server you can’t do this…Oh dear.

Use a reverse-proxy

There is a great service that you can use — cors-anywhere as a kind of reverse-proxy. Basically you can add the cors-anywhere address to the beginning of the one you want to access, and the headers will be added by the cors-anywhere server.

Security problems?

In that case, create your own instance.

Wonderful, yes?

Conclusion:

We should know that the Same-Origin Policy is enforced by Web Browsers, which means we have the ability to turn this off.

We should appreciate that it really makes sense not to turn off this feature for our uses as it is there to protect them.

Extend your knowledge

  • You can make it a little easier to turn off Web Security by following this Guide (HERE)

The Twitter contact:

Any questions? You can get in touch with me here

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store