大家好，我是前端西瓜哥。

今天带大家学习一些 HTTP 常见的头字段，谈谈它们的作用，并附带一些实际使用场景。

客户端发送到服务端的 HTTP 请求，这个数据包称为请求报文。其中的头字段，就是请求头字段。

客户端希望获得资源的类型。

下面是我们打开一个链接时，浏览器默认带上的 Accept：

类似 text/html 则是 MIME 类型，接在后面的 q 代表的是优先级，q 的范围通常在 0 到 1，越大优先级越高。

如果是通过 img 标签发起的请求，Accept 为：

服务端可以从中得知浏览器支持高压缩比的 webp 图片格式，可以考虑返回 webp 格式资源，来提高用户加载资源速度。

客户端支持的压缩算法。

服务端可以根据它来使用压缩算法来压缩资源，降低带宽，让用户能更快加载资源。

使用广泛的老牌压缩算法是 gzip，压缩效率最好的是 br。

客户端支持的语言。

我在浏览器语言设置中做了以下设置：

浏览器发起的请求就会带上这 3 种语言，并根据顺序设置优先级：

服务端可以通过这个字段来做 国际化，根据用户设置的语言来返回不同国家文案内容。

当前请求的域名。

服务端可以根据这个字段来做 反向代理。

假设 blog.fstars.com 和 static.fstars.com 都指向一个 IP 下的服务器，服务端就可以通过这个字段来识别返回对应的服务：blog.fstars.com 拿到的是博客网站，而static.fstars.com 则是拿到静态图片资源。

比如 Nginx 的反向代理可以这样写：

客户端是否希望使用 TCP 长连接。

TCP 的连接要三次握手，断开要四次挥手。如果我们的请求很频繁，TCP 连接后发完一个请求就断开，实在有点浪费资源。所以 HTTP 加入了 Connection 头字段，来指定 TCP 的长时间连接。

keep-alive 表示长连接；close 表示短连接。

用户代理。该字段标注了发送方的一些信息，你可以通过它来知道请求方是浏览器、爬虫、postman 还是 cURL。

我使用苹果笔记本打开 Chrome 浏览器，它的 User-Agent 是这样的。

再比如使用 cURL 命令行工具发出的请求：

User-Agent 可以轻易伪造，并不完全可信，只是作为参考。

一种使用方式是通过 User-Agent 中是否带有 Mobile 之类的信息，来判断客户端是否为移动设备，做一个 302 重定向到另一个移动端适配域名下，比如从 xxx.com 跳转到 m.xxx.com。或者反过来，从移动端页面跳转到普通页面布局。

如果你用电脑浏览器打开 m.bilibili.com，那 bilibili 就会给你来个 302 重定向到 www.bilibili.com。

服务端响应客户端的请求报文，会返回响应报文，响应报文的头字段，就是所谓的响应头字段。

服务端返回的资源类型，可以带上使用的编码格式。

访问普通的 HTML 网页：

text/html 代表资源为 HTML，charset=utf-8 表示使用了 UTF-8 编码。客户端就可以根据这些信息进行展示。

返回资源使用的压缩格式。

使用的压缩算法是从请求头 Accept-Encoding 中选一个出来的，返回的资源是被对应的资源压缩过的。

关于启用 gzip 压缩，可以看看我的这篇文章：《前端性能优化：启用 gzip》

HTTP 消息体的长度。

HTTP 响应报文生成的时间，使用了 GMT 格式。

服务端决定使用长连接还是短连接。

使用了哪种服务器。

比如使用了 Nginx：

因为 Server 会暴露服务器使用的技术栈，容易被黑客针对性攻击。可以考虑去掉这个字段，或者给一个没有带有技术细节的值。比如 github 的做法：

HTTP 缓存相关的头字段不适合单独一个个介绍，所以都放这里吧。

请求头：

响应头：

这些字段需要配合 HTTP 的 强缓存 和 协商缓存 进行讲解，请移步阅读我之前的写的一篇文章：

《HTTP 缓存策略：强缓存和协商缓存》

因为浏览器的同源策略，一般情况下发送 Ajax 请求给另一个域名下的 url 会失败。

为了解决这个问题，需要使用浏览器特有的 CORS （跨源资源共享）相关头字段，来实现跨域请求。

这里涉及的头字段：

具体看我这篇文章：《浏览器跨域请求的机制：CORS》

涉及到两个头字段：

《面试官：Cookies 的属性有哪些？》

HTTP 的常见头字段很多，这里简单介绍了一些，希望能对你了解 HTTP 规范有所帮助。