在无法访问服务器的情况下解决错误 "Request header field <name> is not allowed by Access-Control-Allow-Headers in preflight response"

Question

我正在尝试向 url“https://public-api.wordpress.com/wpcom/v2/work-with-us”发出 GET 请求，其中包含特殊 header 'X-future' 和值 'automattician'。但是，我收到错误消息，预检响应中不允许此 header：

"Request header field x-future is not allowed by Access-Control-Allow-Headers in preflight response."

通过四处搜索，这似乎是一个 CORS 问题，我必须从服务器端添加 header。但是，我无法访问服务器。

这个问题无法解决还是我遗漏了什么？下面是我用代码笔写的测试：


  let url = 'https://public-api.wordpress.com/wpcom/v2/work-with-us';
  const options = {
        method: 'GET', //default
        headers: {'X-future': 'automattician'}
    };

  fetch(url, options)
  .then(blob => blob.json())
  .then(data => console.log(data));

Answer 1

您可以通过运行在您自己的服务器或无服务器函数上获取数据来解决这些问题。

运行这在节点脚本中将起作用并允许您将结果传回您的网站。

const fetch = require("node-fetch");

function fetchServer() {
  return fetch("https://public-api.wordpress.com/wpcom/v2/work-with-us", {
    headers: { "X-future": "automattician" }
  })
    .then(res => res.json())
    .then(res => res);
}

您可以使用无服务器函数轻松部署它，有时在 AWS 中称为 lambda，但大多数云提供商都有类似的东西 https://aws.amazon.com/lambda/

在无法访问服务器的情况下解决错误 "Request header field <name> is not allowed by Access-Control-Allow-Headers in preflight response"

Solving error "Request header field <name> is not allowed by Access-Control-Allow-Headers in preflight response" without access to server

javascript

get

cors

fetch-api