Access-Control-Expose-Headers是如何工作的？

Question

我理解这是决定客户端能从服务器响应中访问哪些头信息，但是我对它何时被应用有些困惑。它是否决定每个受到Access-Control-Allow-Origin头允许的跨域请求的头信息？

为了测试这个问题，我在express中设置了一个测试站点，并加入以下代码：

app.get('/',(req,res)=>{
    res.set('Access-Control-Allow-Origin','https://www.google.com') // to be able to make a cross-origin request
    res.set('foo', 'bar') //custom header that should get filtered because i havent set the access-control-expose-headers header
    res.send('Hello world')
})

基于我的理解，因为我没有在响应中设置任何特殊的Access-Control-Expose-Headers头，客户端只能访问CORS安全列表响应头，因此不应该能够看到我的foo头。

但是，当我在https://www.google.com（我允许使用Access-Control-Allow-Origin头进行CORS）并向我的测试站点发送GET请求时，我可以很好地在响应中看到foo头。这是为什么？有人能解释一下这是如何工作的，或者至少指点我正确的方向吗？先谢谢了。

- Daavee18

---

你可能将Access-Control-Expose-Headers与Access-Control-Allow-Headers混淆了；这两个标头有不同的目的。Access-Control-Expose-Headers指定了除所谓的CORS安全响应标头之外，允许来源上下文中运行的脚本可以从响应中读取哪些响应标头。 - jub0bs

@jub0bs 我不认为我把它们搞混了，我不理解的是即使我没有在响应中提供“Access-Control-Expose-Headers”，我也可以读取我的自定义标头，而这个标头不在CORS安全列出的响应标头中。（请参见我的问题） - Daavee18

请允许我保持怀疑。请添加允许您读取相关标头的脚本。 - jub0bs

@jub0bs 好的，我现在明白了。这是因为我读取的是Chrome Dev Tools的头信息，而不是实际的fetch响应。我发布了一个更详细的答案。 - Daavee18

好的，这正是我所怀疑的。很高兴你找到了答案。 - jub0bs

Answer 1

我明白了。我之所以收到自定义标头，是因为我在Chrome Dev Tools的网络选项卡中读取响应标头。当我运行此脚本时：

fetch('http://127.0.0.1:3000/')
  .then(r => {console.log(response.headers.get('foo'))})

它打印出null。因此，标头实际上对于fetch请求是不可访问的，只能由开发工具访问。

- Daavee18