什么情况下，浏览器会发送预检请求？

浏览器在发送 跨域请求（CORS 请求） 时，某些特定条件下会先发送一个 预检请求（Preflight Request），这是一个 OPTIONS 方法的 HTTP 请求，用于询问服务器是否允许即将发送的实际请求。

---

✅ 浏览器不会发送预检请求的情况（“简单请求”）

只有满足以下所有条件的请求才是 简单请求（simple request），不会触发预检：

1. 请求方法 是以下之一：

• GET
• POST
• HEAD

2. 请求头（Headers） 只包含以下“安全”字段（大小写不敏感）：

• Accept
• Accept-Language
• Content-Language
• Content-Type（但值有限制）
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width

其中 Content-Type 的值只能是以下三种之一：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

3. 没有使用自定义请求头（如 X-Requested-With, Authorization, My-Custom-Header 等）

4. 请求中没有使用 ReadableStream、FormData 以外的复杂 body 类型（如 ArrayBuffer、Blob 等可能触发预检）

---

❌ 触发预检请求（Preflight）的常见情况

只要不满足上述“简单请求”条件，浏览器就会自动发送 OPTIONS 预检请求。典型场景包括：

1. 使用了非简单方法

fetch('/api', { method: 'PUT' })      // PUT、DELETE、PATCH 等都会触发预检
fetch('/api', { method: 'DELETE' })

2. 设置了自定义请求头

fetch('/api', {headers: {'X-Requested-With': 'XMLHttpRequest',   // 自定义头 → 预检'Authorization': 'Bearer xxx',          // 非简单头 → 预检}
})

3. Content-Type 不是简单类型

fetch('/api', {method: 'POST',headers: { 'Content-Type': 'application/json' }, // JSON → 预检！body: JSON.stringify({ name: 'Alice' })
})

⚠️ 虽然 application/json 很常见，但它不是简单请求的 Content-Type，所以会触发预检。

4. 使用了 Fetch 的某些高级特性

• 读取响应中的非简单头（通过 Access-Control-Expose-Headers 暴露的除外）
• 使用 credentials: 'include' 并且有自定义头或非简单方法

---

🔍 预检请求长什么样？

OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://your-site.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: authorization,content-type

服务器必须正确响应（返回 200 + CORS 相关头），浏览器才会发送真正的请求：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: authorization,content-type
Access-Control-Max-Age: 86400  // 可缓存预检结果（秒）

---

🛠 如何避免不必要的预检？

• 尽量使用 GET/POST + 简单 Content-Type
• 避免添加非必要的自定义请求头
• 如果必须用 application/json，那就接受预检（这是正常行为）

---

✅ 总结

条件	是否触发预检
GET + 简单头	❌ 否
POST + Content-Type: application/json	✅ 是
PUT / DELETE	✅ 是
添加 Authorization 头	✅ 是
添加 X-Custom-Header	✅ 是

💡 记住：只要不是“简单请求”，就会触发预检。

这是浏览器出于安全考虑实施的 CORS 安全机制，无法绕过，但可以优化（如设置 Access-Control-Max-Age 缓存预检结果）。