How to bypass 'Access-Control-Allow-Origin' error with XMLHttpRequest (jQuery Ajax)

Learn how to execute an asynchronous request to another domain without any problem in javascript

If you're a curious developer in some point of your life you may already faced (or you will face) the cross-domain/same-origin policy. This policy says that you can't retrieve information from another domain except yours (www.mydomain.com cannot execute async calls to www.otherdomain.com). Fortunately, there is a free proxy server named CORS Anywhere which adds CORS headers to the proxied request.

Solution

To solve this issue easily with javascript, we will make an ajax request as you always do with XMLHttpRequest or jQuery ajax but we'll use the cors-anywhere service, which allow us to bypass this problem. CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request hosted in herokuapp.

The url to proxy is literally taken from the path, validated and proxied. The protocol part of the proxied URI is optional, and defaults to "http". If port 443 is specified, the protocol defaults to "https". This package does not put any restrictions on the http methods or headers, except for cookies. Requesting user credentials is disallowed.

You only have to add as prefix to your request URL https://cors-anywhere.herokuapp.com, then the problem will be solved.

jQuery

// In this example, if you make an ajax request to the following website
var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';
//  But if you make it from a browser, then it will work without problem ...

// However to make it work, we are going to use the cors-anywhere free service to bypass this
var proxy = 'https://cors-anywhere.herokuapp.com/';

$.ajax({
    // The proxy url expects as first URL parameter the URL to be bypassed
    // https://cors-anywhere.herokuapp.com/{my-url-to-bypass}
    url: proxy + myUrl,
    complete:function(data){
        console.log(data);
    }
});

Or using the shortcuts of $.get, $.getJSON or $.post :

var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';

var proxy = 'https://cors-anywhere.herokuapp.com/';

var finalURL = proxy + myUrl;

// With the get JSON (frequently used) method
$.getJSON(finalURL, function( data ) {
    console.log(data);
});

// With the get method
$.get(finalURL, function( data ) {
    console.log(data);
});

// With the post method
$.post(finalURL, function( data ) {
    console.log(data);
});

XMLHttpRequest

// In this example, if you make an ajax request to the following website
var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';
//  But if you make it from a browser, then it will work without problem ...

// However to make it work, we are going to use the cors-anywhere free service to bypass this
var proxy = 'https://cors-anywhere.herokuapp.com/';

// Execute request
var oReq = new XMLHttpRequest();

oReq.addEventListener("load", function () {
    console.log(this.responseText);
});
// Or post, etc
oReq.open("GET", proxy + myUrl);
oReq.send();

There are only two limitations with this approach: