Question

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

我在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'));
})

如果它有任何区别，则从ReactJS组件主体外部的函数调用此fetch方法。

自定义标头的名称为Image-Identification-Path，我的回复标头中的标头为Access-Control-Expose-Headers Image-Identification-Path。

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

Answer 1

您必须配置请求所针对的服务器，以使其响应具有Access-Control-Expose-Headers标头，其值包括自定义响应标头的名称。

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

在这种情况下，如果您查看Postman或甚至浏览器devtools中的响应，您仍然可以看到自定义标题。

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

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

Answer 2

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

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

您无法直接在获取调用的响应上访问标头-您必须在标头上使用entrys（）方法之后进行遍历。

因此，在您的特定情况下，您应该可以通过使用以下代码来实现目标：

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
     }
  }
  .... })

响应标头未显示

2 个答案: