无法从前端 JavaScript 访问跨域响应标头

IT技术 javascript reactjs cors http-headers fetch-api
2021-05-11 17:34:54

我正在使用ReactJS和create-react-app构建一个简单的 Web 应用程序。

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

当我使用 fetch API 发出 POST 请求时，响应是 100% 正确的，但它只给了我 2 个标准标头。我想获得我的自定义标题。我在响应中添加了公开标头，这是情节扭曲：当我从 Chrome 检查工具或邮递员（API 工具）查看标头时，它会显示所有标头，包括我的自定义标头。这是我正在使用的提取代码 -

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

如果有什么不同，这个 fetch 方法是从 ReactJS 组件主体之外的函数调用的。

自定义标题的名称Image-Identification-Path，并在我的响应头报头Access-Control-Expose-Headers的Image-Identification-Path。这是邮递员的图片

摘要：如何使用 fetch 获取自定义标头？

2个回答

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

否则，如果您的浏览器在该Access-Control-Expose-Headers标头中没有看到自定义标头的名称，则它不会让您访问自定义标头的值。

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

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

对于跨域请求，如果该标头名称在Access-Control-Expose-Headers值中，浏览器只会将该自定义响应标头公开给您的前端代码。

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

我找到的解决方案在这篇文章中给出。基本上：

您无法直接访问对 fetch 调用的响应中的标头 - 您必须在标头上使用 entry() 方法后进行迭代。

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

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
     }
  }
  .... })
其它你可能感兴趣的问题
上一篇API Rails 上的获取请求不返回 json 下一篇为什么3D打印机只有一个限位开关？