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:
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:
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/.