AJAX запрос с заголовками неудовлетворительных

Question

Я пытаюсь сделать запрос AJAX для https://developers.zomato.com/api/v2.1/search со ссылкой на Zomato API

Сервера имеет заголовки:

"access-control-allow-methods": "GET, POST, DELETE, PUT, PATCH, OPTIONS", 
"access-control-allow-origin": "*" 

Проблема заключается в том, что API требует дополнительных заголовков, установленных для пользователя -key. Но всякий раз, когда я устанавливаю пользовательские заголовки, хром будет выполнять предполетный запрос, отправив запрос OPTIONS на вышеуказанный URL-адрес, который не работает, и, следовательно, запрос AJAX также не работает.

Если я не устанавливаю заголовки, то я не получаю ошибку CORS, а скорее запретную ошибку с сервера, так как я не устанавливаю заголовок пользовательского ключа.

Любой способ решить эту проблему-22?

Оба Jquery и JavaScript путь не удается:

$(document).ready(function() { 

    $.ajax({ 
     url: 'https://developers.zomato.com/api/v2.1/search', 
     headers: { 
      'Accept': 'application/json', 
      'user_key': 'XXXXX' 
     }, 
     success: function (data) { 
      console.log(data); 
     } 
    }); 

}); 



var xhr = new XMLHttpRequest(); 
var url = 'https://developers.zomato.com/api/v2.1/search'; 
xhr.open('GET', url, false); 

xhr.setRequestHeader('Accept', 'application/json'); 
xhr.setRequestHeader('user_key', 'XXXXXX'); 

xhr.send(null); 

if (xhr.status == 200) { 
    console.log(xhr.responseText); 
} 

Ошибка я получаю:

OPTIONS https://developers.zomato.com/api/v2.1/search 

XMLHttpRequest cannot load https://developers.zomato.com/api/v2.1/search. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 501. 

Если кто-то хочет, чтобы воспроизвести вы можете получить бесплатный пользовательский ключ здесь: https://developers.zomato.com/api

Answer 1

В этом браузере не работает обход этой проблемы. Спецификация CORS требует, чтобы браузер предварял запрос с помощью запроса OPTIONS, если требуются какие-либо пользовательские заголовки. И когда он выполняет предварительные предписания OPTIONS, он не включает ваши пользовательские заголовки, потому что часть запроса OPTIONS - это выяснить, какие пользовательские заголовки разрешены для отправки по запросу. Таким образом, сервер не должен запрашивать пользовательские заголовки в запросе OPTIONS, если он хочет, чтобы это работало в браузере.

Итак, если сервер требует, чтобы пользовательские заголовки были в запросе OPTIONS, сервер просто ожидает чего-то, чего не произойдет в браузере.

Показать похожие ответы, которые описывают больше об этом здесь:

jQuery CORS Content-type OPTIONS

Cross Domain AJAX preflighting failing Origin check

How do you send a custom header in a cross-domain (CORS) XMLHttpRequest?

Using CORS for Cross-Domain Ajax Requests

И еще один пользователь с тем же вопросом здесь:

Zomato api with angular

похоже, что Zomato не поддерживает браузеры, но требует доступа с сервера, на котором у вас нет ограничений CORS.

FYI, ошибка, возвращаемая с Zomato, составляет 501, что означает NOT IMPLEMENTED для команды OPTIONS. Таким образом, похоже, что не только ключ не отправляется с помощью команды OPTIONS, но Zomato не поддерживает команду OPTIONS, но это необходимо для использования пользовательских заголовков в запросе кросс-происхождения из браузера.

Answer 2

Вы не можете обходить Access-Control-Allow-Headers in preflight response.

Однако, как упомянуто @Jaromanda X в комментариях, Zomato посылает:

Access-Control-Allow-Headers:X-Zomato-API-Key

... означает, что вы можете отправить только этот нестандартный заголовок из браузера. Также не идут слишком низкого уровня в определении запроса, когда JQuery имеет красивые и готовые Shorthands ...

TL; DR Рабочий пример:

$.ajax({ 
    type: "GET", //it's a GET request API 
    headers: { 
    'X-Zomato-API-Key': 'YOUR_API_KEY' //only allowed non-standard header 
    }, 
    url: 'https://developers.zomato.com/api/v2.1/dailymenu', //what do you want 
    dataType: 'json', //wanted response data type - let jQuery handle the rest... 
    data: { 
    //could be directly in URL, but this is more pretty, clear and easier to edit 
    res_id: 'YOUR_RESTAURANT_OR_PLACE_ID', 
    }, 
    processData: true, //data is an object => tells jQuery to construct URL params from it 
    success: function(data) { 
    console.log(data); //what to do with response data on success 
    } 
});