Solve CORS Cross-origin issue in Development Environment

Developing a front-end application, let’s say an Angular app, you could run into CORS Cross-origin issues performing requests to back-end services.

XMLHttpRequest cannot load http://my-service/api/my-resource. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000’ is therefore not allowed access.

In production is something that should be configured in the server adding the following header to its response:

Access-Control-Allow-Origin: *

And the same can be done in your local dev machine if you are serving the fron-end and also the back-end. But what happens if your service is in another machine or port?

We can solve this problem with a local reverse proxy, or using apps like Burp Suite. But a really quick workaround is to use the Google Chrome Allow-Control-Allow-Origin plugin.

Don’t forget to configure properly the filters to intercept only the URLs to the services that you use:

http://my-service/api/my-resource/*

CORS_chrome_plugin

Another hacky and quick way to solve this is opening chrome with the web security disabled:

open /Applications/Google\ Chrome.app/ --args --disable-web-security

but It could be really dangerous to use that all the time.

To know more about CORS read http://www.html5rocks.com/en/tutorials/cors/.