Cross-Domain requests in Javascript

If you are developing a modern web-based application, chances are you:

1. Are using javascript on the client side.
2. Need to integrate with services that are not completely under your control (or that reside in a different “origin”).
3. Have been confronted by this error message in your browser’s console:

XMLHttpRequest cannot load http://external.service/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my.app' is therefore not allowed access.


Every time I need to integrate a web app with some external service or some server-side API I have no complete control over, I bump into this error. Google has not yet provided me with a concise description of the problem or an overview of alternatives to perform Cross-Domain requests, so this post will serve as a personal future reference.