一篇文章理解前端的请求头和响应头含义

1.前言

作为一名前端开发必不可少的就是会和请求接口打交道，那么也应该理解请求头和响应头的含义，方便分析和快速定位问题及时解决。

通过这篇文章主要介绍比较常用的请求头和响应头，希望能对大家有所帮助。

2.什么是请求头和响应头

请求头和响应头就是HTTP协议的组成部分，请求头和响应头用于在客户端（浏览器）和服务器之间传递额外的属性，这些属性内容用于控制HTTP请求和响应的行为。

请求头是客户端传给服务端的，响应头是服务端传给客户端的。

3.常见的请求头含义

Accept

含义：表示指定客户端能接受哪些类型的内容。当客户端调用请求接口时候，设置Accept会要求服务器返回那些合适的类型格式。

例如：

accept: application/json, text/plain,

Accept-Charset

含义：表示指定客户端能接受那些类型的字符集。

例如：

Accept-Charset: utf-8, iso-8859-1;q=0.5

Cookie

含义：表示用于存储用户特定的信息，可以识别用户的具体身份。通过Cookie传递用户ID，让服务端识别用户身份。

例如：

Cookie: session=abPC9527; user=tty

Origin

含义：表示跨域相关信息，用于设置CORS的请求，可以防止陌生的域的请求和访问。

例如：

Origin: https://tty.com

Referer

含义：表示当前的请求从哪个url传递过来。

例如：

Referer: https://tty.com/pageone

User-Agent

含义：表示包含发起请求的用户的一些代理信息，比如浏览器的具体版本和具体类型。

例如：

User-Agent: Mozilla/3.0 (Windows NT 9.0; Win32; x64) AppleWebKit/517.36 (KHTML, like Gecko) Chrome/56.0.3029.110 Safari/517.3

If-Modified-Since

含义：表示客户端在上次获取资源的具体时间。

例如：

If-Modified-Since: Tue, 10 Oct 2021 11:01:01 GMT

Range

含义：表示指定第一个字节到指定最后字节之间的位置，告诉服务器想获取哪个范围的数据。

例如：

Range: bytes=0-255

4.常见的响应头含义

Access-Control-Allow-Origin

含义：表示用于配置CORS跨域相关信息，指定允许访问资源的域名，如果配置为*则表示可访问所有。

例如：

Access-Control-Allow-Origin: *

Cache-Control

含义：表示缓存机制的缓存策略。

例如：

Cache-Control:public  // 响应会被缓存
Cache-Control:no-store  // 在任何条件下，响应都不会被缓存
Cache-Control:must-revalidate  // 指定条件下会缓存重用
Cache-Control:max-age=10 // 设置缓存的有效时间
Cache-Control:no-cache  // 直接向服务器端请求最新资源,不缓存

Content-Length

含义：表示当前响应体的具体大小，具体单位为字节。

例如：

Content-Length: 9527

Content-Type

含义：表示响应体的具体数据格式是什么。

例如：

Content-Type: application/json

Date

含义：表示服务器开始对客户端发送响应的具体时间。

例如：

Date: Tue, 10 Oct 2021 11:01:01 GMT

ETag

含义：表示用于验证缓存，确保当前的资源未被修改过。如果没有更改过则返回304状态码，减少不必要传输。

例如：

ETag: "1234952790pc"

Location

含义：表示用于重定向，指向一个新的URL。

例如：

Location: https://tty.com/new-page

Set-Cookie

含义：表示服务器通过这个请求头把cookie带到客户端。客户端会在后面请求中自动将这cookie放在请求头中。

例如：

Set-Cookie: session=pc9527; Path=/; HttpOnly; Secure

Server

含义：表示告诉服务器软件的信息，例如版本号信息。

例如：

Server: Apache/1.4.38 (Ubuntu)

X-Powered-By

含义：表示返回后端使用的具体框架或技术栈。

例如：

X-Powered-By: Express

Content-Encoding

含义：表示响应体的编码方式，例如gzip压缩。

例如：

Content-Encoding: gzip

Last-Modified

含义：表示资源最后被修改的具体时间。

例如：

Last-Modified: Tue, 10 Oct 2021 11:00:00 GMT

Expires

含义：跟缓存相关，表示指定资源的过期时间，这个时间前都不过期。

例如：

Expires: Wed, 21 Oct 2021 07:21:00 GMT

5.总结

在平时的开发工作和日常写代码时都会遇到这些内容，里面涉及了一些缓存、跨域和安全相关等内容，只有了解这些请求头和响应头的含义才能快速定位和解决相关问题。