javascript - 无法从前端 JavaScript 访问跨源响应 header

Question

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

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

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

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

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

自定义 header 的名称是Image-Identification-Path，我的响应 header 中的 header 是Access-Control-Expose-Headers for Image -标识路径。

总结:如何使用 fetch 获取我的自定义 header ？

Answer 1

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

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

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

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

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