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.

Photo by Thomas Jensen on Unsplash

Terminology

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

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!

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.

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.

The example

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

Oh dear!

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.

Make the browser accept resources without the header

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

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
1. Open Spotlight with Command-Space
2. Type Terminal
3. open -a Google\ Chrome --args --disable-web-security --user-data-dir

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.

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.

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.

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