Curl to Javascript fetch, Access-Control-Allow-Headers 问题答案

【问题标题】：Curl to Javascript fetch, Access-Control-Allow-Headers problemCurl to Javascript fetch, Access-Control-Allow-Headers 问题
【发布时间】：2021-07-25 05:21:24
【问题描述】：

我这里有点情况。

这是一个 100% 有效的 curl 请求（文档）：

curl -X GET "myUrl" -H "accept: application/json" -H "token: myToken"

我正在尝试将其重写为 javascript fetch 或 $.ajax。它们都不起作用。

代码：

fetch(requestUrl, {
    method: 'GET',
    credentials: 'same-origin', // include, *same-origin, omit
    headers: new Headers({
        'accept': 'application/json',
        'token': 'myToken'
    }),
})

我得到错误：

Access to XMLHttpRequest at 'myUrl' from origin 'myOrigin' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

如果我做对了，有什么办法可以在标头中传递该标记，即使“Access-Control-Allow-Headers 不允许标头字段标记”？或者是否有可能以某种方式控制预检？

谢谢你们。

【问题讨论】：

API的实际（URL）域和JS运行的页面是什么？
"或者是否有可能以某种方式控制预检响应？" - 是的，服务器需要这样做。这是你自己的 API 吗？
@Bergi 我在我的本地主机上玩，API 是rest.giriton.com/apidoc，我无法控制那里的标题..
在这种情况下，您应该编写自己的 API 服务器（在您的域上运行）来代理请求，或者联系该 API 的开发人员要求他们添加 CORS。但是，如果您构建一个网站只是为了访问您自己帐户中的数据，那么您可能无论如何都不应该与该网站的任何访问者共享您的访问令牌。

标签： javascript fetch

【解决方案1】：

您的后端需要支持 requestUrl 的 OPTIONS 变体（无论路径是什么），该变体返回带有标头 Access-Control-Allow-Headers: token 的响应。

您应该看到在发出您的GET 获取请求之前，有一个OPTIONS，浏览器正在OPTIONS 响应中寻找Access-Control-Allow-Headers。

【讨论】：

是的，但它不是我的端点，它是一些 API。卷毛是怎么做到的？也许是因为它在不同的网络层？
Curl 可以发出请求，因为没有任何安全协议阻止请求通过。 Fetch 使用浏览器的网络请求引擎，保护用户免受未经授权的跨源请求。您的请求本质上是跨源的，从 localhost 到 rest.grition.com。