javascript - header 失败的 AJAX 请求

Question

我正在尝试向 https://developers.zomato.com/api/v2.1/search 发出 AJAX 请求引用Zomato API

服务器有 header :

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

问题是 API 需要为用户 key 设置额外的 header 。但是每当我设置自定义 header 时，chrome 都会通过向失败的上述 URL 发送 OPTIONS 请求来执行飞行前请求，因此 AJAX 请求也会失败。

如果我没有设置 header ，那么我不会收到 CORS 错误，而是来自服务器的禁止错误，因为我没有设置用户 key header 。

有什么办法可以解决这种第 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.

如果有人想复制你可以在这里得到一个免费的用户 key : https://developers.zomato.com/api

Answer 1

浏览器似乎没有解决此问题的方法。如果需要任何自定义 header ，CORS 规范要求浏览器使用 OPTIONS 请求预检请求。而且，当它执行 OPTIONS 预检时，它不包含您的自定义 header ，因为 OPTIONS 请求的部分目的是找出允许在请求中发送哪些自定义 header 。因此，如果服务器希望它在浏览器中工作，则不应在 OPTIONS 请求中要求自定义 header 。

因此，如果服务器要求自定义 header 出现在 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 限制的服务器访问。

仅供引用，从 Zomato 返回的错误是 501，这意味着 OPTIONS 命令未实现。因此，看起来不仅 key 没有通过 OPTIONS 命令发送，而且 Zomato 不支持 OPTIONS 命令，但这是在浏览器的跨源请求中使用自定义 header 所必需的。