How to handle CORS issue in 4 easy steps

Tushar Rungta
Jul 22, 2017 · 4 min read

The above image is almost a horror movie. A nightmare for every developer. However, the solution is simple, effective and graceful. Below are the 4 simple steps that I found helpful in avoiding the CORS devil and its impending doom in your next Angular JS application.

WHAT IS CORS?

The browser is cursed and possessed! (At least… mine is :P)

The evil spirit does not let you run files from different origin or CROSS ORIGIN! But this is exactly needed to run an application, isn’t it? Then how do we do it? All you need to implement are 4 easy steps and that’s it!

HOST APPLICATION ON SERVER

This is straightforward and very common. But it’s worth a mention. Run the angularjs application on a local server when testing locally. Many tools are available like Apache, xampp, npm etc. Personally I prefer npm because of the sheer ease and simplicity of installation and run.

Download node js install npm and other dependencies from this link

You can download 32/64-bit binaries, zip or installers according to your requirement.

After installation, open cmd in your project’s root folder and run the following command -npm start

INJECT $SCE IN SERVICES

SCE (Strict Contextual Escaping) lets you bind to trusted sources only. Hence, this will avoid XSS bugs. According to Angular documentation -

“To illustrate this, consider the ng-bind-html directive. It renders its value directly as HTML: we call that the context. When given an untrusted input, AngularJS will attempt to sanitize it before rendering if a sanitizer is available, and throw otherwise. To bypass sanitization and render the input as-is, you will need to mark it as trusted for that context before attempting to bind it.”

However, SCE has another usage. You can use it to wrap a URL as a trusted URL to avoid the CORS bureaucracy to some extent. For example, the code written below loads a local json as a url (Cross Origin) -

Now the above code will not work because although the db.json is now trusted but not available on our application server (remember npm server?). Hence we need to mock our json as a REST API and then call the url. Here comes JSON-SERVER to the rescue!

MOCK JSON AS REST API

JSON-Server lets you mock a rest api from a json.

You can install json-server by running following command at the project’s root folder — npm install -g json-server

Then you can run the following command at your local json’s folder (db,json for example).

json-server — watch db.json

This api is then available at http://localhost:3000/{json root}. For example, in my db.json, the root of all data is “flights”.

USE JSON PROXY INSTEAD OF JSON

Now we come to the last part. Our services code looks as below after changes -

You can see that the rest api mock url is now called as a trusted url. However, we also need to use JSONP method instead of JSON. This is because the url is running on a different port than the application server.

CONCLUSION

CORS is a necessary evil. It is needed to avoid security issues. However, data mocking and trusted url wrappers enable us the flexibility to get round the issue. I hope this helps you as much as it helped me without losing any sleep :)

Tushar Rungta

Written by

Developer. Blogger. Trying to be a Doer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade