HTTP 的常见头字段有哪些？说说它们的作用
大家好，我是前端西瓜哥。
今天带大家学习一些 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-aliveTCP 的连接要三次握手，断开要四次挥手。如果我们的请求很频繁，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.0User-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-8text/html 代表资源为 HTML，charset=utf-8 表示使用了 UTF-8 编码。客户端就可以根据这些信息进行展示。
Content-Encoding
返回资源使用的压缩格式。
Content-Encoding: gzip使用的压缩算法是从请求头 Accept-Encoding 中选一个出来的，返回的资源是被对应的资源压缩过的。
关于启用 gzip 压缩，可以看看我的这篇文章：《前端性能优化：启用 gzip》
Content-Length
HTTP 消息体的长度。
Content-Length: 2103Date
HTTP 响应报文生成的时间，使用了 GMT 格式。
Date: Wed, 10 Aug 2022 13:16:58 GMTConnection
服务端决定使用长连接还是短连接。
Connection: keep-aliveServer
使用了哪种服务器。
比如使用了 Nginx：
Server: nginx/1.21.5因为 Server 会暴露服务器使用的技术栈，容易被黑客针对性攻击。可以考虑去掉这个字段，或者给一个没有带有技术细节的值。比如 github 的做法：
Server: GitHub.comHTTP 缓存相关
HTTP 缓存相关的头字段不适合单独一个个介绍，所以都放这里吧。
请求头：
Cache-Control Pragma If-Modified-Since If-None-Match
响应头：
Last-Modified ETag
这些字段需要配合 HTTP 的 强缓存 和 协商缓存 进行讲解，请移步阅读我之前的写的一篇文章：
CORS 相关
因为浏览器的同源策略，一般情况下发送 Ajax 请求给另一个域名下的 url 会失败。
为了解决这个问题，需要使用浏览器特有的 CORS （跨源资源共享）相关头字段，来实现跨域请求。
这里涉及的头字段：
Access-Control-Request-前缀的请求头Access-Control-Allow-前缀的响应头
具体看我这篇文章：《浏览器跨域请求的机制：CORS》
Cookies 相关
涉及到两个头字段：
Cookie Set-Cookie
结尾
HTTP 的常见头字段很多，这里简单介绍了一些，希望能对你了解 HTTP 规范有所帮助。
我是前端西瓜哥，欢迎关注我，学习更多前端知识。
关注公众号，后台回复 「字节」，即可获得字节前端面试资料