常用 HTTP 请求头的实用指南

rebel
99 阅读7分钟

以往做项目，很少和 HTTP 请求头打交道。可在做 SSR 项目时，情况就不一样了，使用频率大幅增加，现在就来记录下这些常用的请求头。

参考资料：developer.mozilla.org/zh-CN/docs/…

Cookie

Cookie 是一个 HTTP 请求标头，其中含有先前由服务器通过 Set-Cookie 标头投放或通过 JavaScript 的 Document.cookie 方法设置，然后存储到客户端的 HTTP cookie 。这个标头是可选的，而且可能会被忽略，例如在浏览器的隐私设置里面设置为禁用 cookie。

生成过程：

  1. 服务器发送 Cookie：当用户首次访问一个网站时，服务器可以在 HTTP 响应头中通过 “Set - Cookie” 字段来发送 Cookie。例如，服务器发送的响应头可能包含 “Set - Cookie: username=JohnDoe; Path=/; Expires=Wed, 01 Jan 2025 00:00:00 GMT”，这就将一个名为 “username”，值为 “JohnDoe”，路径为 “/”，过期时间为 2025 年 1 月 1 日的 Cookie 发送给了浏览器。
  2. 浏览器存储和管理 Cookie：浏览器接收到 “Set - Cookie” 指令后，会根据 Cookie 的属性将其存储在本地。在后续向同一服务器发送请求时，浏览器会检查请求的 URL 的域和路径是否与存储的 Cookie 匹配，以及 Cookie 是否未过期等条件。如果满足条件，浏览器会在 HTTP 请求头中通过 “Cookie” 字段将匹配的 Cookie 发送回服务器。例如，浏览器发送的请求头可能包含 “Cookie: username=XXX”。
  3. 服务器接收和使用 Cookie：服务器接收到带有 Cookie 的请求后，可以根据 Cookie 中的信息来识别用户，持久化登陆。

使用场景:

以前做SSR项目的时候，保持用户登录就是用的cookie持久化体系+redis 保证登陆状态

Accept

Accept 请求 HTTP 标头表示客户端能够理解的内容类型，以 MIME 类型的形式表达。借助内容协商机制, 服务器可以从诸多备选项中选择一项进行应用，并使用 Content-Type 响应标头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求标头设置合适的值，比如，获取一个 CSS 层叠样式表时的值与获取图片、视频或脚本文件时的值是不同的。

例如，在一个 Web 浏览器中访问一个网页，浏览器会发送一个 HTTP 请求到服务器以获取网页内容。在这个请求中，浏览器可能会设置 Accept 头为

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

这表示浏览器最希望接收的是 text/html（HTML 文档）或者 application/xhtml+xml（XHTML 文档）格式的数据来展示网页；也可以接受 application/xml 格式的数据，但优先级稍低（通过 q 值来体现，q 表示质量因子，范围是 0 - 1，这里 0.9 表示相对较低的优先级）；同时还能接受一些图像格式（如 image/avif、image/webp、image/apng）的数据；最后的 */* 表示可以接受任何类型的数据，但优先级最低（q = 0.8）。

User - Agent

User-Agent 请求标头是一个特征字符串，使得服务器和对等网络能够识别发出请求的用户代理的应用程序、操作系统、供应商或版本信息。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

这表示是运行在 Mac Intel？设备上的 Chrome 131.0.0.0 浏览器。其操作系统是 Mac OS X 10.15.7 ，采用 AppleWebKit 537.36 内核，为了保持兼容性，它会添加诸如 KHTML, like Gecko 和 Safari 的字符串。

使用场景：

根据不同的 User-Agent 请求头判断客户端是移动端还是桌面端，进而返回对应的页面

server {
    listen       80;
    server_name  example.com;

    # 匹配移动端 User-Agent
    if ($http_user_agent ~* "(iPhone|iPad|iPod|Android|BlackBerry|Windows Phone)") {
        rewrite ^(.*)$ /mobile/$1 last;
    }

    # 处理桌面端请求，默认导向桌面端页面目录
    location / {
        root   /var/www/html/desktop;
        index  index.html index.htm;
    }

    # 移动端页面目录的配置
    location /mobile/ {
        root   /var/www/html;
        index  index.html index.htm;
    }
}

Authorization

Authorization 是一种用于向服务器发送用户或客户端的认证信息。它提供了一种机制，使得服务器能够识别请求资源的用户身份，并确定该用户是否被授权访问所请求的资源

  • 青春版 （Basic Authentication） ：

    • 格式：Authorization: Basic <Base64编码后的用户名和密码>。例如，假设用户名是admin，密码是123456，先将admin:123456进行 Base64 编码，得到YWRtaW46MTIzNDU2，则请求头为Authorization: Basic YWRtaW46MTIzNDU2。
    • 工作原理：当服务器收到带有这种认证方式的请求头时，会对 Base64 编码的内容进行解码，获取用户名和密码，然后与服务器端存储的用户信息进行比对，以验证用户身份。不过这种认证方式相对简单，安全性较低，因为 Base64 编码很容易被解码。

  • 承载令牌认证（Bearer Token Authentication） ：

    • 格式：Authorization: Bearer <令牌内容>。例如，Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c。
    • 工作原理：这里的令牌通常是由服务器在用户认证成功后颁发的，如 JSON Web Token（JWT）。JWT 包含了用户的身份信息和权限信息等，通过数字签名保证其完整性和真实性。服务器收到请求后，会验证令牌的有效性，如检查签名是否正确、令牌是否过期等，以此来确定用户是否有权访问资源。这种方式在现代 Web 应用和 API 开发中被广泛使用，因为它更加灵活和安全。

使用场景

  1. api请求：在需要用户登录才能访问特定资源的场景下，如个人信息页面、付费内容、管理后台等，服务器通过检查Authorization请求头来确保只有经过认证的用户才能访问这些资源
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] ='Bearer'+ getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
  1. sso单点登录：在多个应用共享用户认证的场景中，Authorization头可以用于传递统一的认证令牌，使得用户在不同应用之间切换时无需重复登录。这种一般都是双token，实现无感跳转，以前写过一篇无感刷新思路的，虽然是uniapp，但是原理上是倒差不差的

Content-Type

Content-Type 表示标头用于指示资源的原始媒体类型（在发送时应用任何内容编码之前）。在请求的时候客户端会告诉服务器实际发送的数据类型

content-type:application/json;charset=utf-8
content-type:application/x-www-form-urlencoded

对于客户端向服务器发送请求，Content-Type告诉服务器消息主体的数据格式。
content-type:application/json表示告诉服务器这是一个json数据格式。charset=utf-8字符编码标准
content-type:application/x-www-form-urlencoded就是代表这是一个表单数据结构看起就像：

POST /foo HTTP/1.1
Content-Length: 68137
Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575

-----------------------------974767299852498929531610575
Content-Disposition: form-data; name="description"

一些文本
-----------------------------974767299852498929531610575
Content-Disposition: form-data; name="myFile"; filename="foo.txt"
Content-Type: text/plain

（上传文件 foo.txt 的内容）
-----------------------------974767299852498929531610575--

使用场景

在请求配置上默认请求格式，其他（上传之类的）有需求就单独配置其他格式。

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

大概平时用的最多的也就这些了，其他的就随便看看

avatar
文章
阅读
粉丝