如何用js在浏览器请求后端响应页面后，获取其中响应头的信息

Question

一些web采取的是ssr的方式，又或者是类似java的jsp那种，通过服务端渲染页面。那么后端可以在渲染的时候在响应头里加自定义信息。

那么客户端浏览器获取到一个页面（响应内容是html）并加载的时候，能不能通过javascript获取到后端响应该页面内容时，获取加载响应页面的响应头的信息？

举个例子。

客户端请求后端的一个名叫/user/info的action，这个action返回的是一个html，后端还在响应头里设置了自定义的数据。

大致分为5个流程：
（1）客户端请求名叫/user/info的action。（例如在浏览器上输入网址http://127.0.0.1/user/info，回车确认）
（2）后端接收到客户端的请求，后端在响应头里设置自定义信息
（3）后端将html内容响应给客户端
（4）客户端浏览器接收到后端的响应，其中就包括响应头和页面信息（html字符串）
（5）客户端浏览器将后端响应得到html内容进行页面渲染。

那么问题来了，客户端请求/user/info的action（在浏览器上输入网址，然后回车确认），到响应后，浏览器渲染页面的时候，也就是第五步流程，能否调用js获取流程中第2个流程里的，也就是后端在请求处理中，对响应头中设置的数据呢。

这个能用js做到吗？

Answer 1

我仔细看了两遍，还是没看明白……

我这么说吧，你用浏览器打开一个页面，浏览器渲染页面并执行 JS，在 JS 里无法获得你想要的 header。

如果你用 js 发起一个请求，比如用 xmlHttpRequest，或者 fetch()，那就能取到。

Answer 2

如果能够控制后端，并且前端也可以配合，为什么不把这些信息利用cookie之类的处理进行传递？
这样js是肯定在用户允许的情况下获取到的。

Answer 3

通过你的描述，好像前后端不是通过ajax进行通讯请求的， 前端应该啥都没做，完全是后端渲染并返回整个页面的，实在不太理解这样的话，还需要前端做什么？ 既然是后端渲染，去判断响应头的事情不应该后端一并完成吗？
如果我理解错误，你们确实是用AJAX通讯，然后后端返回局部html代码交给前端渲染的话， 请参考下面的函数获取响应头

XMLHttpRequest.getAllResponseHeaders()
https://developer.mozilla.org...

Answer 4

js是跑在客户端的，服务端渲染，到客户端就是完整的html了，这个过程和js没有关系。
而且既然是服务端渲染，后端还在在header里设置自定义信息不是多此一举？

你真想用js需要这些信息，那就用ajax再发起一个页面请求，看看有没有给到你header

Answer 5

按理说，这种需求比较稳的实现方式应该和后台协商，把前端js需要的数据直接渲染到页面当中或设置到cookie中

这样前端js加载之后也能比较方便的获取到

但是，如果后台不配合是不是真的就不能实现了呢？因为之前确实没有想过这方面的可能性，所以还是尝试去翻了一下

在so上找到了这个答案

现在你可以利用 Server-Timing 去实现你想要的功能

在SSR时，设置 Server-Timing 头，随后通过前端js通过 PerformanceServerTiming api 来获取 Server-Timing 头信息

上面的答案中也有提到相关例子和应用，可以看下是否满足需求

当然，仅从可行性出发的，确实可以利用 Server-Timing 实现。但还有有一些限制的

1. 目前只是草案阶段，safari、ie并不支持，移动端ios就别想了
2. 该接口仅在某些浏览器中的安全上下文（HTTPS）中可用。 - from MDN

我也是第一次了解到这个header，其他还有没有什么坑就真不清楚了