预检请求是什么?

预检请求(Preflight Request)是浏览器在发送非简单跨域请求(CORS)前,自动发起的一次试探性请求,用于确认目标服务器是否允许后续的实际请求。它是浏览器实现 CORS 安全策略的重要机制,核心逻辑如下:

🔍 为什么需要预检请求?

浏览器对 "非简单请求"(可能对服务器数据产生较大影响的请求)会格外谨慎。例如:

  • 方法:PUT、DELETE、CONNECT 等非 GET/POST 方法
  • 头部 :包含自定义头部(如X-Custom-Header)或超出简单头部(如Content-Typeapplication/x-www-form-urlencoded/multipart/form-data/text/plain
  • 内容 :请求体包含复杂数据(如 JSON 格式且Content-Typeapplication/json

预检请求通过OPTIONS 方法提前询问服务器:"我要发送这样的请求,你允许吗?",避免直接发送可能被拒绝的请求,减少安全风险。

📡 预检请求的流程

  1. 浏览器发起预检

    发送OPTIONS请求,包含以下关键头:

    • Origin:当前网页域名(必填)
    • Access-Control-Request-Method:实际请求的方法(如PUT
    • Access-Control-Request-Headers:实际请求将携带的自定义头部(如X-Token
  2. 服务器响应验证

    服务器需返回200 OK,并包含以下关键头(缺一不可):

    • Access-Control-Allow-Origin:允许的源(如https://example.com
    • Access-Control-Allow-Methods:允许的方法(如GET, POST, PUT
    • Access-Control-Allow-Headers:允许的头部(如X-Token, Content-Type
    • Access-Control-Max-Age:预检结果的缓存时间(秒,避免重复预检)
  3. 发送实际请求

    若服务器验证通过,浏览器发送实际请求;否则终止请求并报错(如No 'Access-Control-Allow-Origin')。

🚦 简单请求 vs 非简单请求

类型 条件(同时满足) 是否触发预检
简单请求 方法为 GET/POST; Content-Type 为简单类型; 无自定义头部
非简单请求 不满足上述任一条件

示例

  • 简单请求:POST /api/data + Content-Type: application/x-www-form-urlencoded(不预检)
  • 非简单请求:PUT /api/data + Content-Type: application/json + X-Token: xxx(触发预检)

⚠️ 常见问题

  1. 服务器未配置 CORS :预检响应缺少必要头部,导致请求失败。
    ✅ 解决方案:服务器需正确返回Access-Control-*系列头。
  2. 预检缓存Access-Control-Max-Age默认 0(每次请求都预检),建议设置合理值(如 86400 秒 = 1 天)。
  3. 浏览器行为:预检请求由浏览器自动发起,前端代码无需手动处理,但需确保服务器配置正确。

🌰 一个预检请求的例子

场景 :前端向https://api.example.com发送PUT请求,携带X-Custom-Header

  1. 预检请求(OPTIONS)

    http 复制代码
    OPTIONS /resource HTTP/1.1  
    Origin: https://web.example.com  
    Access-Control-Request-Method: PUT  
    Access-Control-Request-Headers: X-Custom-Header  
  2. 服务器响应

    http 复制代码
    HTTP/1.1 200 OK  
    Access-Control-Allow-Origin: https://web.example.com  
    Access-Control-Allow-Methods: GET, POST, PUT  
    Access-Control-Allow-Headers: X-Custom-Header, Content-Type  
    Access-Control-Max-Age: 86400  
  3. 实际请求(PUT)

    http 复制代码
    PUT /resource HTTP/1.1  
    Origin: https://web.example.com  
    X-Custom-Header: value  
    Content-Type: application/json  

总结

预检请求是 CORS 机制的 "安全门卫",通过 OPTIONS 方法提前验证跨域请求的合法性。理解它的触发条件和服务器配置要求,能有效解决跨域问题,提升前端与后端的协作效率。

相关推荐
Ares-Wang3 分钟前
Vue》》@ 用法
前端·javascript·vue.js
心.c37 分钟前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript
爱分享的程序员44 分钟前
前端面试专栏-前沿技术:31.Serverless与云原生开发
前端·javascript·面试
姜 萌@cnblogs2 小时前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip2 小时前
实现elementplus官网主题切换特效
前端·css
Darling02zjh2 小时前
HTML5
前端·html·html5
成长ing121382 小时前
闪白效果
前端·cocos creator
Lazy_zheng2 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
张元清2 小时前
什么是React并发模式中的Tearing(撕裂)
前端·面试
AndyLaw2 小时前
统计字符数错一半,我被 length 坑了两次
前端·javascript