Запрос кросс-происхождения заблокирован по запросу Ajax

Question

Это небольшой вопрос, и я новичок в запросах API и AJAX, так что терпите меня.

В этом запросе есть токен JWT (с которым я вдвойне незнаком), и я смог получить запрос на работу с Почтальоном, введя заголовки:

Ключ : Авторизация

Значение : JWT eytJhbGciOiJIUzI1NiIW6GHIH8g (не мой настоящий ключ)

Это возвращает некоторые результаты JSON, и это здорово.

Однако, когда я иду, чтобы проверить запрос с AJAX, код здесь:

$( "#test-fill" ).on( "click", function() {

    console.log('Begin test:');

    var api_url = 'https://builder.guidebook.com/open-api/v1/schedule-tracks/'
    var key = 'eytJhbGciOiJIUzI1NiIW6GHIH8g' // not real for stackoverflow question


    $.ajax({
        url: api_url,
        contentType: "application/json",
        dataType: 'json',
        xhrFields: {
            withCredentials: true
        },
        headers: {
            'Authorization': 'JWT ' + key,
        },      
        success: function(result){
            console.log(result);
        },
        error: function(xhr, status, error){
            var errorMessage = xhr.status + ': ' + xhr.statusText
            alert('Error - ' + errorMessage);
        },
    })

}); 

Я получаю сообщение об ошибке:

Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса на https://builder.guidebook.com/open-api/v1/schedule-tracks/. (причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»). Блокировка перекрестного запроса: та же политика происхождения запрещает чтение удаленного ресурса на https://builder.guidebook.com/open-api/v1/schedule-tracks/. (причина: запрос CORS не выполнен)

Почему это происходит и как я могу это исправить?

Answer 1

Вам необходимо установить заголовок ответа «Access-Control-Allow-Origin», возвращаемый с вашего сервера при каждом запросе. Значением этого заголовка ответа сервера является либо URL-адрес вашего клиента, либо «*» со словом «разрешить все».

Вот некоторые общие детали:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

То, как вы это установите, полностью зависит от сервера, на котором работает сервер (в данном случае https://builder.guidebook.com).

Почему работает Почтальон, а не браузер?

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

Альтернативы и обходные пути:

1. Если ваш клиент, выполняющий AJAX, находился на том же сервере (в пределах https://builder.guidebook.com),, это не будет проблемой.
2. Если у вас нет доступа для добавления заголовков ответов CORS на исходный сервер, вы можете подключить свой собственный сервер (например, локально) к запросам прокси. Подобно Postman, веб-серверы по умолчанию не беспокоятся о CORS для исходящих запросов на другие серверы.

Примечание: Это общая проблема при разработке пользовательского интерфейса локального клиента, которая должна интегрироваться с удаленными серверами. Подходы разработки, такие как webpack, предлагают автоматическое проксирование именно для такой распространенной ситуации.