Как обойти ошибку Access-Control-Allow-Origin с XMLHttpRequest (jQuery Ajax)

Если вы любопытный разработчик в какой-то момент своей жизни, вы, возможно, уже сталкивались (или столкнетесь) с политикой междоменных доменов / того же происхождения. Эта политика гласит, что вы не можете получить информацию из другого домена, кроме вашего (www.mydomain.com не может выполнить асинхронные вызовы www.otherdomain.com). К счастью, есть бесплатный прокси-сервер с именем CORS Anywhere который добавляет заголовки CORS к прокси-запросу.

Решение

Чтобы легко решить эту проблему с помощью JavaScript, мы сделаем запрос AJAX, как вы всегда делаете с XMLHttpRequest или же jQuery ajax но мы будем использовать сервис cors -where, который позволит нам обойти эту проблему. CORS Anywhere — это обратный прокси-сервер NodeJS, который добавляет заголовки CORS к прокси-запросу, размещенному в herokuapp.

URL-адрес прокси-сервера буквально берется из пути, проверяется и проксируется. Протокольная часть прокси-адреса URI является необязательной и по умолчанию имеет значение «http». Если указан порт 443, по умолчанию используется протокол «https». Этот пакет не накладывает никаких ограничений на методы http или заголовки, кроме файлов cookie. запрашивающий учетные данные пользователя запрещено.

Вам нужно только добавить в качестве префикса URL вашего запроса https://cors-anywhere.herokuapp.com, тогда проблема будет решена.

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);
}
});

Или с помощью ярлыков $.get, $.getJSON или же $.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();

У этого подхода есть только два ограничения:

Повеселись !

Ссылка на основную публикацию
Adblock
detector