无法在 JS 中访问 fetch() 响应位置标头

Question

我遇到了一个已经在 stackoverflow 和其他平台 ( 1 , 2 ) 上讨论过的问题，但提供的解决方案在我的情况下是不可能的。

我正在尝试通过 POST 请求和 fetch() 从 BlueSnap（支付处理公司， 可以在此处找到有关确切操作的详细信息）获取令牌。 请求正在运行，令牌正在通过响应中的 Location 标头发送给我。 我可以通过 Chrome 开发工具看到标头和所需的令牌，但我无法在我的 JS 代码中获取和使用它。 response.headers 对象是空的，我尝试以任何方式访问 response.header.Location 都失败了。

我试过这个：

console.log(response.headers.get('location'))

还有这个

for(const header of response.headers){
  console.log(header);
}

但这似乎都不起作用。

正如这里讨论的那样，我尝试添加以下内容：

'Access-Control-Expose-Headers': 'location'

到我的请求中的标头列表，因此它符合CORS 政策 requiremnts ，但它没有帮助。 我认为这应该插入在服务器端，而不是在客户端。 我的猜测是我不是第一个遇到这个问题的人，但是 BlueSnap 的客户支持没有解决方案。 唯一可能的解决方案是在那里的服务器上添加'Access-Control-Expose-Headers': 'location'吗？

我的问题是：我如何访问这个 http 响应位置标头，它被明确地发送到我的浏览器，但目前不能与我的 JS 代码一起使用。

非常感谢您的时间和精力！

*我不认为我对这个特定问题很重要，但我正在使用 ReactJS 处理这个项目

Answer 1

你不能。

用于在 Web 浏览器中从 JavaScript 发出 HTTP 请求的 API（ fetch和XMLHttpRequest ）透明地遵循重定向。

response对象将包含对location标头中指定位置的请求的响应。 您永远无法访问包含重定向指令的响应。

---

如果您阅读 API 的文档，它会说：

您可以使用服务器到服务器 API 调用为特定结帐会话创建托管付款字段令牌。

...所以你不应该首先从客户端 JS 访问它。