HTTP常见的请求头有哪些？都有什么作用？在 Web 应用中使用这些请求头？

HTTP 请求头（Request Headers）用于在 HTTP 请求中携带额外的信息，帮助服务器更好地处理请求。以下是一些常见的 HTTP 请求头及其作用：

常见请求头及其作用

1. Accept

• 作用：告知服务器客户端可以接受的内容类型。
• 示例：Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
• 说明：客户端可以接受多种内容类型，优先级由 q 参数决定。

2. Accept-Encoding

• 作用：告知服务器客户端支持的压缩编码方式。
• 示例：Accept-Encoding: gzip, deflate, br
• 说明：客户端支持 gzip、deflate 和 brotli 压缩。

3. Accept-Language

• 作用：告知服务器客户端首选的语言。
• 示例：Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8
• 说明：客户端首选英语（美国），其次是英语（通用），最后是中文（简体）。

4. Authorization

• 作用：用于向服务器提供认证信息，通常用于 Basic 认证或 Bearer Token。
• 示例：Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
• 说明：使用 Bearer Token 进行认证。

5. Content-Length

• 作用：告知服务器请求体的长度（以字节为单位）。
• 示例：Content-Length: 348
• 说明：请求体的长度为 348 字节。

6. Content-Type

• 作用：告知服务器请求体的内容类型。
• 示例：Content-Type: application/json
• 说明：请求体是 JSON 格式的数据。

7. Cookie

• 作用：用于发送存储在客户端的 cookie 信息。
• 示例：Cookie: session_id=123456; user_id=7890
• 说明：发送两个 cookie：session_id 和 user_id。

8. Host

• 作用：指定请求的主机名和端口号。
• 示例：Host: www.example.com:8080
• 说明：请求的目标主机是 www.example.com，端口号是 8080。

9. Referer

• 作用：告知服务器当前请求是从哪个页面跳转过来的。
• 示例：Referer: https://www.example.com/page1
• 说明：当前请求是从 https://www.example.com/page1 页面跳转过来的。

10. User-Agent

• 作用：告知服务器客户端的浏览器和操作系统信息。
• 示例：User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3
• 说明：客户端使用的是 Chrome 浏览器，操作系统是 Windows 10。

11. Cache-Control

• 作用：控制缓存行为。
• 示例：Cache-Control: no-cache
• 说明：要求不使用缓存，每次都从服务器获取最新数据。

12. Connection

• 作用：控制连接的状态。
• 示例：Connection: keep-alive
• 说明：保持连接打开，以便后续请求可以复用同一连接。

13. If-Modified-Since

• 作用：告知服务器只有在指定日期之后被修改的资源才会返回。
• 示例：If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
• 说明：只有在 2015 年 10 月 21 日 07:28:00 GMT 之后被修改的资源才会返回。

14. If-None-Match

• 作用：告知服务器只有在实体标签（ETag）不匹配时才返回资源。
• 示例：If-None-Match: "67ab4321cd8e"
• 说明：只有在 ETag 不等于 "67ab4321cd8e" 时才返回资源。

15. Origin

• 作用：用于 CORS（跨域资源共享）请求，告知服务器请求的来源。
• 示例：Origin: https://www.example.com
• 说明：请求的来源是 https://www.example.com。

16. Range

• 作用：请求资源的一部分。
• 示例：Range: bytes=0-1023
• 说明：请求资源的前 1024 字节。

17. Upgrade

• 作用：请求升级到另一种协议，通常用于 WebSocket 协议。
• 示例：Upgrade: websocket
• 说明：请求将连接升级到 WebSocket 协议。

18. Sec-WebSocket-Key

• 作用：用于 WebSocket 握手，生成一个随机的密钥。
• 示例：Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
• 说明：生成的随机密钥。

19. Sec-WebSocket-Version

• 作用：告知服务器 WebSocket 协议的版本。
• 示例：Sec-WebSocket-Version: 13
• 说明：使用 WebSocket 协议的第 13 版。

20. X-Requested-With

• 作用：告知服务器请求是由 AJAX 发起的。
• 示例：X-Requested-With: XMLHttpRequest
• 说明：请求是由 XMLHttpRequest 发起的。

如何在 Web 应用中使用这些请求头

前端（JavaScript/TypeScript）

使用 Fetch API

Fetch API 是现代浏览器提供的原生方法，用于发起 HTTP 请求。你可以通过 headers 选项来设置请求头。

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer your-token',
    'User-Agent': 'MyApp/1.0'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

使用 Axios

Axios 是一个流行的 HTTP 客户端库，支持浏览器和 Node.js。你也可以通过 headers 选项来设置请求头。

import axios from 'axios';

axios.get('https://api.example.com/data', {
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer your-token',
    'User-Agent': 'MyApp/1.0'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

后端（Node.js/Express）

使用 Express

在 Express 中，你可以通过 res.set 方法来设置响应头，或者通过 req.headers 来访问请求头。

const express = require('express');
const app = express();

app.get('/data', (req, res) => {
  // 访问请求头
  const authorization = req.headers.authorization;

  // 设置响应头
  res.set({
    'Content-Type': 'application/json',
    'Cache-Control': 'no-cache'
  });

  // 发送响应
  res.send({ message: 'Hello, World!', authorization });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

后端（Python/Flask）

使用 Flask

在 Flask 中，你可以通过 request.headers 来访问请求头，通过 response.headers 来设置响应头。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/data')
def get_data():
    # 访问请求头
    authorization = request.headers.get('Authorization')

    # 创建响应
    response = jsonify({
        'message': 'Hello, World!',
        'authorization': authorization
    })

    # 设置响应头
    response.headers['Content-Type'] = 'application/json'
    response.headers['Cache-Control'] = 'no-cache'

    return response

if __name__ == '__main__':
    app.run(port=3000)

常见请求头的使用示例

1. Authorization

在前端发起请求时，设置 Authorization 头：

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在后端访问 Authorization 头：

app.get('/data', (req, res) => {
  const authorization = req.headers.authorization;
  // 处理请求
});

2. Content-Type

在前端设置 Content-Type 头：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在后端访问 Content-Type 头：

app.post('/data', (req, res) => {
  const contentType = req.headers['content-type'];
  // 处理请求
});

3. Cache-Control

在后端设置 Cache-Control 头：

app.get('/data', (req, res) => {
  res.set({
    'Cache-Control': 'no-cache'
  });
  res.send({ message: 'Hello, World!' });
});

4. Accept

在前端设置 Accept 头：

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在后端访问 Accept 头：

app.get('/data', (req, res) => {
  const accept = req.headers.accept;
  // 处理请求
});

总结

通过上述示例，你可以看到如何在前端和后端使用常见的 HTTP 请求头。这些请求头在实际应用中非常有用，可以帮助你更好地控制请求和响应的行为，提高应用的性能和安全性。希望这些示例对你有所帮助！