详解 chrome devtools network 中的 header

作为一个前端开发，无论是开发调试、排查问题、分析请求都离不开 chrome devtools，它真的是一个开发神器，隐藏着很多功能可以让我们探索。今天我主要来详细介绍一下其中的一个小功能，通过 devtools 来查看网络请求中的 header 信息。

如何查看 header， Cmd + Option + I 唤起 Developer Tools。选中 Network，刷新页面，选中任意请求，我们就可以看到 Headers 信息。如下：

接下来我们一个个来看一下 Headers 里面有什么？

Headers

General

简单来说，General 就是一个概览，包含请求、返回的一些重要信息，但是不包含请求体里面的信息。比如请求的地址 Request URL，请求方法 Request Method，返回的状态码 Status Code，远程地址 Remote Address，以及 Referrer 策略 Referrer Policy 等。

Response Headers

返回头是指响应体之外的额外信息，比如文件类型、压缩协议、文件大小、缓存控制、访问控制、cookie等信息。比如下面这些：

Request Headers

请求头是提供一些请求的配置，方便服务器可以根据我们请求的信息来调整响应。比如通过 Accept-* 来标识希望服务器能够提供的格式，还有一些比如用于安全认证、缓存控制的信息。比如下面这些： 请求的内容:

Query String Parameters

Get 请求中的参数会在 Query String Parameters 展示出来

Request Payload

Post 请求中带的信息会在 Request Payload 中展示出来

Form Data

表单信息，请求头会带 Content-Type: multipart/form-data;

常见问题

Referrer Policy

我们看到 General 中都有一个 Referrer Policy 这个头部。这个的作用是控制请求中 refer 是否带 refer，带哪些信息，有 8 种策略，具体可以参考: Referrer-Policy. 那这个怎么设置呢？为什么 General 中的 Referrer Policy 有些是 strict-origin-when-cross-origin，有些是unsafe-url，我们请求头里面并没有设置 CSP 来控制，也没有通过 meta 标签修改过，为什么会自动有呢？那是因为浏览器有一个默认的策略，在chrome 85之前是 no-referrer-when-downgrade，85之后改为 strict-origin-when-cross-origin，也就是把默认的策略改的更严格了，跨域的时候只带 origin，不会把 path、query 也带上。

Pseudo-header

我们会看到有些请求头里面会有一些以 : 开头的key，比如 :authority、:method、:path、:scheme等，简单来说是 Http2 中用来把重要的 ip 层的信息传递给 TPC,UDP 的，一般看到这些请求头你就知道这个请求使用的 Http2 协议。更多可以参考:What is the Significance of Pseudo Header used in UDP/TCP

view source

我们看到有些 Headers 中的 Request Headers 和 Response Headers 右边是有 view source 的，有些是没有的，这个是为什么呢？因为 view source 本来的含义是看源码，而我们知道 http2 请求头是用二进制编码的，不是文本格式，所以如果让你看一堆二进制是没有意义的。所以对于 http1.x 的请求，我们是可以通过 view source 查看的，Http2 就没有 view source 了。

Provisional headers are shown

请求没有真正发送，通常是因为加载了缓存资源，也有可能是装了广告插件，更多可能可以参考:caution-provisional-headers-are-shown-in-chrome-debugger

参考

1. Chrome浏览器Referrer-Policy默认值变更
2. HTTP headers