获取请求不工作答案

【问题标题】：Fetch Request Not Working获取请求不工作
【发布时间】：2017-10-10 03:09:26
【问题描述】：

我正在尝试使用 Fetch API 或 request 将自定义标头 X-Query-Key 添加到 HTTP 请求，但是当我将其添加到请求的标头时，它似乎无法设置标头和 @ 987654324@ 出于某种原因设置为OPTIONS。

当我删除标题时，它会恢复为GET，因为它应该这样做。

示例代码如下所示：

   const options = {
    url: url,
    headers: {
      'Accept': 'application/json',
      'X-Query-Key': '123456' //Adding this breaks the request
    }
  };

  return request(options, (err, res, body) => {
    console.log(body);
  });

【问题讨论】：

听起来像 CORS。

标签： javascript fetch-api

【解决方案1】：

跨域请求的自定义标头必须由请求资源的服务器。这里面的服务器示例需要配置为接受 X-Custom-Header 标头以便获取成功。设置自定义标题时，浏览器执行预检检查。这意味着浏览器首先向服务器发送一个 OPTIONS 请求以确定 HTTP 服务器允许方法和标头。如果服务器是配置为接受原始请求的方法和标头，然后发送。否则会抛出错误。

因此，如果使用自定义标头，您将有 2 个请求，第一个使用方法 OPTIONS 来检查服务器是否允许自定义标头，之后如果服务器响应为 200 OK 并允许您的原始请求，第二个将被发送

Working with the Fetch API

【讨论】：

【解决方案2】：

试试这个：

const headers = new Headers({
  "Accept": "application/json",
  "X-Query-Key": "123456",
});

const options = {
  url: url,
  headers: headers
};

return request(options, (err, res, body) => {
  console.log(body);
});

如果这不能解决问题，可能与CORS有关。

【讨论】：

谢谢 - 这行得通，我猜我错过了Headers - 现在我遇到了 CORS 问题，这是我的下一个问题：D
我认为这是因为您必须调用构造函数才能创建自己的标头。嘿，至少 fetch API 使 CORS 更易于处理。新的 fetch API 的真正障碍是 fetch request cannot be aborted。 fetch 对 ServiceWorkers 有其用途，但实际上我发现自己仍然在到处使用 XHR2。