预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 *答案

【问题标题】：Request header field * is not allowed by Access-Control-Allow-Headers in preflight response预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 *
【发布时间】：2022-01-31 12:18:33
【问题描述】：

首先：我已经发现了与我类似的问题，但由于我是 react 和 javascript 的绝对初学者，我无法通过给定的提示和解释来完全理解和解决我的问题。

我的问题：我想通过给定的 api（不是我的）发出 fetch 请求，但是当我想包含“Language”标头时，得到上面写的 CORS 错误。看来我不允许提出这个请求 - 浏览器中的预检响应也表明了这一点。有趣的部分是：如果我在命令窗口中使用必要的标头发出 Curl -X get 请求，我会收到响应。

所以我的问题是：为什么允许我在命令窗口中发出该请求，而不是在浏览器中？是否有任何解决方法或者我需要对 chrome 进行一些设置更改？`

JFYI，我的代码 - 不起作用：

export const Items = () => {
  fetch("https://requestedurl", {
    headers: {
      Accept: "application/json",
      Language: "de",
    },
  }).then((res) => res.json())
    .then((res) => console.log(res));
};

在命令提示符下工作：

curl -X GET -H "Language: de" https://requestedurl

感谢您的帮助:)

【问题讨论】：

标签： cors fetch request-headers response-headers

【解决方案1】：

浏览器区分simple requests 和复杂的浏览器。区别主要归结为“它比<form> 标签更复杂吗？”。

因此，您不能（例如）使用 Authorization 标头或在您的情况下为 Language 向其他域发送请求。

包含此限制的是浏览器，这就是 cURL 不受影响的原因。 (API) 服务器可以通过向浏览器发送标头来选择允许来自部分或全部来源的 CORS 请求。

正确配置，会发生这种情况：

浏览器认为请求“不简单”
它不是您的请求，而是向另一台服务器执行 HEAD（不是 GET/POST）请求，并告诉服务器您网站的域是什么以及您设置的任何自定义标头。
如果允许您的域（源）向其发送请求以及它接受的（自定义）标头列表，则其他服务器将发送。
如果其他服务器开绿灯，浏览器将允许您原来的 GET/POST/(etc) 请求通过。否则，您会看到与当前一样的错误。

之前链接的文章深入探讨了 CORS 是什么。如果您无法控制 (API) 服务器，则无法进行这些更改。一种选择是在您自己的域上运行代理服务器，这将使请求“简单”（因为它不再是跨源）。

【讨论】：