CORS проблема с веб-сервисом thumbnail.ws

Question

Я хочу написать HTML-страницу, которая генерирует снимок URL-адреса, используя бесплатный веб-сервис thumbnail.ws.

Вот мой код:

 var myurl = "http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800"
 $.ajax({
            url: myurl,
            crossDomain: true,
            xhrFields: {
         withCredentials: true
      },
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error !!!");
            }
        }); 

У меня есть эта ошибка в консоли:

Блокировка перекрестного запроса: та же политика происхождения запрещает чтение удаленного ресурса по адресу http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800. (Причина: отсутствует заголовок CORS "Access-Control-Allow-Origin").

Я не понимаю, почему тот же URL работает, когда я вставляю его в браузер и даже когда я пишу клиент PHP с использованием curl, но не при вызове с использованием AJAX?

Могу я что-то сделать или это проблема с сервером?

С уважением:)

Answer 1

Попробуйте отправить запрос через открытый прокси-сервер CORS, например https://cors-anywhere.herokuapp.com/:

var myurl = "https://cors-anywhere.herokuapp.com/http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800"

Или настройте свой собственный прокси-сервер, используя код из https://github.com/Rob--W/cors-anywhere/

Я не понимаю, почему тот же URL работает, когда я вставляю его в браузер и даже когда я пишу клиент PHP с использованием curl, но не при вызове с использованием AJAX?

Это потому, что если вы пишете PHP-клиент с использованием curl, вы не сталкиваетесь с ограничениями по месту происхождения, а когда вставляете URL в адресную строку браузера, вы не сталкиваетесь с какими-либо ограничениями по месту происхождения.

Но если у вас есть код JavaScript, который выполняется на стороне клиента в браузере, и он делает запрос кросс-источника, используя jQuery $.ajax(…) или какая-то другая библиотечная функция, или напрямую вызывает XHR/Fetch, тогда это вне той же политики происхождения, которую применяют браузеры, поэтому по умолчанию браузеры блокируют ее.

См. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS для получения подробной информации.

Ключевым моментом, который нужно знать, является то, что ваш браузер блокирует запрос, и единственный способ заставить ваш браузер разблокировать его - это включить ответ Access-Control-Allow-Origin заголовок.

http://api.thumbnail.ws похоже не отправляет Access-Control-Allow-Origin заголовок, поэтому единственный способ заставить браузер разрешить вашему коду работать с ответами на него - это проксировать их через открытый сервис, такой как https://cors-anywhere.herokuapp.com/ или через собственный прокси-сервер, чтобы добавить необходимые Access-Control-Allow-Origin заголовок ответа, который видит браузер.