咱们先聊聊，啥叫前端预检请求

说实话，这玩意儿听起来挺高大上的。

其实就是浏览器在跨域之前，先跑个小跑步，给服务器递个OPTIONS的“先声”。

哈哈，这就像你去朋友家，门口保安要先核对一下身份证，合格了才Neng进门。

这个核查过程，就是我们常说的“预检请求”。

别误会，浏览器不是想刁难你。

它是想把跨域这件事Zuo得geng安全。

同源策略一出，所有不在同一个协议、域名、端口的请求dou会被限制。

于是CORS登场了。

CORS让服务器主动声明哪些来源Ke以访问自己的资源。

但Ru果你的请求里带点“特殊”玩意儿，服务器得先确认一下——这时候预检就派上用场啦。

别把这俩词弄混了咱说清楚。

所谓“简单请求”，满足下面几个条件：

方法只Neng是 GET、POST、HEAD

Content‑Type 必须是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain

自定义头部只Neng是 Accept、Accept‑Language、Content‑Language、Content‑Type

只要满足，上面这些，你的请求直接飞过去，不会触发预检。

不对不对，我刚才说的有点太严谨了其实还有一点点细节，比如不Neng有 Cookie 之类的敏感信息也会触发。

举几个常见例子：

- 用了PUT/DELETE/PATCH这些非标准方法。

- Content‑Type 是 application/json、application/xml 那种。

- 加了自定义头部，比如 Authorization、X‑Requested‑With 之类。

- 想传文件却用了FormData。

- 请求中带了If-Modified-Since, If-None-Match, User-Agent。

OPTIONS /api/xxx HTTP/1.1

Origin: http://example.com  // 告诉服务器“我是谁”。

Access-Control-Request-Method: PUT  // 我想用 PUT 发正式请求。

Access-Control-Request-Headers: Authorization,Content-Type // 我准备带哪些自定义头部。

服务器收到后Ru果愿意放行，就回一堆CORS相关响应头：

- : *

- : GET,POST,PUT,DELETE,…

- : Authorization,Content-Type

- : 86400 // 表示这次检查结果Ke以缓存一天。. ....... . Ru果服务器答应，就算正式的 POST/PUT 请求来了它们就Neng顺利通过；否则浏览器直接拦住不往下走。

尽量用 GET/POST/HEAD 而不是 PUT/DELETE/PATCH。

Ru果真的需要传 JSON，把它包在表单字段里用 x-www-form-urlencoded。

少写自定义 Header。比如 Authorization Ke以放在 Cookie 里。

服务器返回一个合理的 Max-Age，让浏览器在有效期内直接复用上一次的检查结果。

一次性把多个需求的数据塞到一个返回体里别每个小功Nengdou单独调接口。

开发阶段Ke以搭个本地代理，把跨域变成本地同源；生产环境也Ke以用 Nginx Zuo反向代理。

Allow-Origin 要么 * 要么明确写来源，例如 http://example.com 。

Allow-Credentials 与 * 冲突，一旦需要发送 Cookie，就必须写具体域名。

Expose-Headers 用来告诉前端哪些响应头可读，否则只Neng读到Zui基本的几条。