预检请求触发条件与优化

Tue, 04 Mar 2025 09:31:00 +0000

考察点分析

核心能力维度：跨域请求机制理解、HTTP协议规范掌握、性能优化实践能力
技术评估点：

区分简单请求与预检请求的触发条件
掌握CORS预检缓存机制及优化手段
准确记忆简单请求的3个严格限制条件
理解浏览器安全策略与性能优化的平衡

技术解析

关键知识点

CORS预检机制 > 简单请求判定条件 > Access-Control-Max-Age优化

原理剖析

浏览器执行跨域请求时，根据请求特征决定是否触发预检（Preflight）：

非简单请求会触发OPTIONS预检，包括：
- 使用PUT/DELETE/PATCH方法
- 包含自定义请求头（如Authorization）
- Content-Type非以下值：
  text/plain multipart/form-data application/x-www-form-urlencoded
Access-Control-Max-Age响应头设置缓存时间（秒），使浏览器在有效期内复用预检结果，减少OPTIONS请求次数。该值过大会导致策略更新延迟，建议设置为合理时间（如2小时=7200）。
简单请求必须同时满足：
- 方法为GET/HEAD/POST
- 仅包含以下头：
  Accept Accept-Language Content-Language Content-Type
- Content-Type为上述三个允许值

常见误区

误认为所有POST请求都是简单请求
忽略Content-Type中字符编码的影响（如application/json;charset=UTF-8仍会触发预检）
混淆预检缓存与实际请求缓存机制

问题解答

触发OPTIONS的条件：

使用PUT/DELETE/PATCH方法
包含自定义请求头
Content-Type非标准值（如application/json）

Access-Control-Max-Age优化：
设置响应头Access-Control-Max-Age: 7200，使2小时内同源请求跳过预检阶段。需注意服务端配置变更时客户端缓存未过期导致的策略失效问题。

简单请求条件：

方法限制：GET/HEAD/POST
头部限制：仅允许标准头集合
Content-Type限制：特定MIME类型且无额外参数

解决方案

 // 后端CORS配置示例（Node.js）
const express = require('express');
const app = express();

// 处理预检请求
app.options('/api', (req, res) => {
 res.header('Access-Control-Allow-Origin', '*')
 .header('Access-Control-Allow-Methods', 'GET,POST,PUT')
 .header('Access-Control-Allow-Headers', 'Content-Type,Authorization')
 .header('Access-Control-Max-Age', 7200) // 2小时缓存
 .send();
});

// 处理实际请求
app.post('/api', (req, res) => {
 res.header('Access-Control-Allow-Origin', '*').json({ data: 'ok' });
});

复杂度优化：

CORS on ZiYang FrontEnd Interview

预检请求触发条件与优化

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link