随笔小计-前端经常接触的http响应头（跨域CORS,性能-缓存-安全，token）

在前端开发中，响应头由后端或服务器设置，前端开发需要理解其含义，以便调试跨域，缓存，安全性能等问题。

1.CORS-跨域

响应头	说明
`Access-Control-Allow-Origin`	允许哪些源访问资源（如 `*` 或 `https://your-site.com`）
`Access-Control-Allow-Methods`	允许的 HTTP 方法（如 `GET, POST, PUT`）
`Access-Control-Allow-Headers`	允许客户端发送的自定义请求头（如 `Authorization, Content-Type`）
`Access-Control-Allow-Credentials`	是否允许携带凭证（如 cookie），设为 `true` 时 `Allow-Origin` 不能为 `*`
`Access-Control-Max-Age`	预检请求（OPTIONS）结果的缓存时间（秒）

**Access-Control-Allow-Origin: ***是 CORS（跨域资源共享）机制中的一个关键 HTTP 响应头，用于告诉浏览器：该资源可以被任意源（origin）的网页访问。

**Access-Control-Max-Age：**当浏览器发起一个带自定义请求头使用PUT/DELETE方法发送JSON数据等，会先自动发送以OPTIONS预检请求到服务'跨域请求是否被允许'，避免相同请求重复发送预检请求，设置时间控制缓存持续时间。

2.性能，缓存，安全

响应头	值	类别	作用说明	前端注意事项
`Connection`	`keep-alive`	性能优化	保持 TCP 连接复用，减少建连开销	无需处理，浏览器自动管理
`Content-Encoding`	`gzip`	性能优化	响应体使用 Gzip 压缩	浏览器自动解压，确保服务器正确压缩文本资源
`Content-Type`	`text/javascript;charset=UTF-8`	内容类型	标识资源为 UTF-8 编码的 JavaScript	确保编码一致，避免乱码；现代推荐 `application/javascript`（但兼容）
`Strict-Transport-Security`	`max-age=31536000; includeSubDomains; preload`	安全	强制浏览器 1 年内使用 HTTPS（含子域）	⚠️ HTTP 请求将被拒绝，确保全站 HTTPS
`Transfer-Encoding`	`chunked`	传输机制	分块传输（动态内容，无固定长度）	浏览器自动处理，无需干预
`X-XSS-Protection`	`1; mode=block`	安全（旧）	启用 XSS 过滤并阻断攻击页面	📌 现代浏览器已弃用，应优先使用 CSP

**Content-Encoding：**响应体使用 Gzip 压缩

3.Authorization: Bearer <token>

请求头中用于传递身份认证凭证

认证方案	示例	说明
Bearer（最常用）	`Authorization: Bearer eyJhbGciOiJIUzI1NiIs...`	用于 JWT、OAuth 2.0 等 Token 认证。前端从登录接口获取 token 后，后续请求都携带此头。
Basic	`Authorization: Basic dXNlcjpwYXNz`	用户名密码 Base64 编码（`user:pass` → `dXNlcjpwYXNz`）。仅限 HTTPS，不推荐用于 Web 前端。

使用fetch

javascript 复制代码

const token = localStorage.getItem('access_token');

fetch('/api/user/profile', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(res => res.json())
.then(data => console.log(data));

使用Axios

javascript 复制代码

axios.get('/api/orders', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
});