当一个浏览器向服务器发起跨域请求时,若该请求属于”复杂请求”,会先自动发送一次OPTIONS请求作为”预检请求”,服务器正确处理这类请求,是构建现代Web应用的重要技术基础,以下是关于OPTIONS请求的核心知识点与技术实践:
Access-Control-Allow-Origin: https://example.com // 允许的源
Access-Control-Allow-Methods: GET,POST,OPTIONS // 支持的方法
Access-Control-Allow-Headers: Content-Type,Authorization // 允许的请求头
Access-Control-Max-Age: 86400 // 预检结果缓存时间(秒)
(2)动态处理策略
- 根据请求源动态设置
Access-Control-Allow-Origin
可通过白名单机制验证请求来源,避免使用通配符带来的安全隐患 - 方法校验机制
比对请求头的Access-Control-Request-Method
与服务器支持的方法列表
(3)性能优化要点
- 合理设置缓存时间
通过Access-Control-Max-Age
减少重复预检请求(建议值:7200秒及以上) - 精简响应内容
OPTIONS响应体通常为空,避免返回冗余数据
典型场景的技术实践
案例1:RESTful API跨域访问
# Nginx配置示例 location /api/ { if ($request_method = OPTIONS) { add_header 'Access-Control-Allow-Origin' '$http_origin'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,Content-Type'; add_header 'Access-Control-Max-Age' 1728000; return 204; } }
案例2:身份验证场景处理
当请求携带Authorization
头时:
Access-Control-Max-Age
是否生效Access-Control-Allow-Credentials
配置技术参考文献
- Fetch Living Standard – CORS Protocol
- MDN Web Docs – HTTP OPTIONS
- W3C CORS Recommendation
结束)