无法从前端 JavaScript 访问 cross-origin 响应 header

Question

我正在使用 ReactJS 和 create-react-app.

构建一个简单的网络应用程序

我在 Heroku 上设置了一个后端 API，我可以在其中发出 POST 请求。一切正常，除了：

当我使用 fetch API 发出 POST 请求时，响应是 100% 正确的，但它只给了我 2 个标准 header。我想得到我的自定义 header。我在我的回复中添加了 expose header，这里是情节转折：当我从 Chrome Inspection Tool 或 Postman（API 工具查看 headers 时), 它显示了所有的 headers，包括我自定义的。 这是我正在使用的获取代码 -

fetch(theUrl, {
  method: 'POST',
  body: JSON.stringify({
    "placeholder": "placeholder"
  })
})
.then(function(res) {
  console.log(res.headers.get('CUSTOM_HEADER_NAME'));
})

如果有任何区别，这个 fetch 方法是从 ReactJS 组件的主要 body 之外的函数调用的。

自定义header的名称是Image-Identification-Path，我的回复header中的header是Access-Control-Expose-Headers for Image-Identification-Path。

总结：如何使用 fetch 获取自定义 header？

Answer 1

您必须配置将请求发送到的服务器，使其响应具有 Access-Control-Expose-Headers header，其中包含您自定义响应的名称 header。

否则，如果您的浏览器在 Access-Control-Expose-Headers header 中看不到自定义 header 的名称，它不会让您访问自定义 header 的值=25=].

在这种情况下，如果您在 Postman 甚至浏览器开发工具中查看响应，预计您仍然能够看到自定义 header。

但仅仅因为浏览器在响应中获得自定义 header 并不意味着浏览器会将其公开给您的前端 JavaScript 代码。

对于 cross-origin 请求，如果 header 名称在 Access-Control-Expose-Headers 值中，浏览器只会将自定义响应 header 暴露给您的前端代码。

Answer 2

我知道这个问题很老，但我昨天运行解决了这个问题，给出的答案对我不起作用。

我找到的解决方案在这个article中给出。基本上：

You can’t directly access the headers on the response to a fetch call - you have to iterate through after using the entries() method on the headers.

因此，在您的特定情况下，您应该能够使用以下代码实现目标：

fetch(theUrl, {
  method: 'POST',
  body: JSON.stringify({
    "placeholder": "placeholder"
  })
})
.then(response => { 
  for (var pair of response.headers.entries()) { // accessing the entries
     if (pair[0] === 'CUSTOM_HEADER_NAME') { // key you're looking for, in your case Image-Identification-Path
        let imagePath = pair[1]; //// saving that value
     }
  }
  .... })

无法从前端 JavaScript 访问 cross-origin 响应 header

Can’t access cross-origin response header from frontend JavaScript

javascript

http-headers

cors

reactjs

fetch-api