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

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

常见的请求头字段

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

Accept

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

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

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

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

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

Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

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

Accept-Encoding

客户端支持的压缩算法。

Accept-Encoding: gzip, deflate, br

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

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

Accept-Language

客户端支持的语言。

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

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

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-US;q=0.7

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

Host

当前请求的域名。

Host: nginx.org

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

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

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

server {
    # 博客页面
    server_name  blog.fstars.wang;
    location / {
        proxy_pass   http://localhost:3000;
    }
}
server {
    # 图片等资源
    server_name  static.fstars.wang;
    location / {
        root   /www/static/;
    }
}

Connection

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

Connection: keep-alive

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

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

User-Agent

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

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

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

User-Agent: curl/7.77.0

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

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

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

常见的响应头字段

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

Content-Type

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

访问普通的 HTML 网页：

Content-Type: text/html; charset=utf-8

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

Content-Encoding

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

Content-Encoding: gzip

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

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

Content-Length

HTTP 消息体的长度。

Content-Length: 2103

Date

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

Date: Wed, 10 Aug 2022 13:16:58 GMT

Connection

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

Connection: keep-alive

Server

使用了哪种服务器。

比如使用了 Nginx：

Server: nginx/1.21.5

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

Server: GitHub.com

HTTP 缓存相关

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

请求头：

• Cache-Control
• Pragma
• If-Modified-Since
• If-None-Match

响应头：

• Last-Modified
• ETag

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

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

CORS 相关

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

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

这里涉及的头字段：

• Access-Control-Request- 前缀的请求头
• Access-Control-Allow-前缀的响应头

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

Cookies 相关

涉及到两个头字段：

• Cookie
• Set-Cookie

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

结尾

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

我是前端西瓜哥，欢迎关注我，学习更多前端知识。