随笔小计-前端经常接触的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
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
axios.get('/api/orders', { headers: { 'Authorization': 'Bearer ' + token } });