How to bypass 'Access-Control-Allow-Origin' error with XMLHttpRequest

This service allows you to bypass the same-origin policy by adding the necessary CORS (Cross-Origin Resource Sharing) headers to your request.

To resolve this issue easily, we’ll use either XMLHttpRequest or jQuery Ajax to make an asynchronous request, but we’ll route it through the CORS Anywhere service. CORS Anywhere is a Node.js-based reverse proxy that automatically appends CORS headers to the proxied request. It's hosted on Heroku and provides a simple way to circumvent cross-origin restrictions.

The key is to prepend your request URL with the CORS Anywhere URL, which will handle the request for you. The CORS Anywhere proxy automatically validates the target URL and forwards the request with the proper headers.

Steps to Bypass the CORS Error:

1. Prepend the CORS Anywhere URL to the target URL.
2. Send the request using XMLHttpRequest, and the CORS headers will be automatically added to the proxied request.

Using XMLHttpRequest

// The URL you want to request
var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';

// The proxy URL to bypass the CORS error
var proxy = 'https://cors-anywhere.herokuapp.com/';

// Create a new XMLHttpRequest instance
var xhr = new XMLHttpRequest();

// Define what happens on successful completion of the request
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(xhr.responseText);  // Log the response
    } else {
        console.error('Request failed. Status: ' + xhr.status);
    }
};

// Open the request with the proxy + target URL
xhr.open('GET', proxy + myUrl);

// Send the request
xhr.send();

In this example:

• CORS Anywhere is a free proxy service that you can use by prepending https://cors-anywhere.herokuapp.com/ to your original request URL.
• XMLHttpRequest is used to send the HTTP request, and when the response is received, it logs the response in the console.
• The proxy ensures that the CORS headers are added, allowing the request to bypass the same-origin policy.

Using jQuery

// Example: Making an AJAX request to the following URL
var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';

// Proxy URL to bypass CORS restriction
var proxy = 'https://cors-anywhere.herokuapp.com/';

// Using jQuery’s $.ajax method
$.ajax({
    // Pass the URL with the proxy prefix
    url: proxy + myUrl,
    complete: function (data) {
        console.log(data);
    }
});

// Alternatively, use shorthand methods like $.get, $.getJSON, or $.post:
$.getJSON(proxy + myUrl, function (data) {
    console.log(data);
});

$.get(proxy + myUrl, function (data) {
    console.log(data);
});

$.post(proxy + myUrl, function (data) {
    console.log(data);
});

Limitations

1. Cookies are not proxied: The CORS Anywhere proxy does not handle cookies.
2. User credentials are not allowed: The proxy will block requests that require user credentials.

This method works for most cases, but be aware that if you're working on a production environment or a more secure setup, it's better to have proper server-side solutions to handle CORS, as relying on a proxy like CORS Anywhere may not be suitable for all use cases.