普通 提交不会触发cors预检，因其是同步导航行为、绕过cors机制；只有用fetch或xhr拦截提交时才可能触发预检，关键取决于是否构成非简单请求。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

为什么表单提交会触发CORS预检？ 普通 <form></form> 提交（如 method="POST" + enctype="application/x-www-form-urlencoded"）本身**不会触发预检请求**——浏览器直接发 POST，不带 Origin 头，也不校验 CORS。 但一旦你用 JavaScript 拦截表单、改用 fetch() 或 XMLHttpRequest 提交（比如为了控制响应、加 token、处理错误），就进入跨域场景，且多数情况会触发预检。 常见踩坑点：你以为“只是换了个提交方式”，结果后端没配 Access-Control-Allow-Methods 或 Access-Control-Allow-Headers，OPTIONS 请求直接 403/404，整个请求卡死。

fetch 提交表单时如何避免不必要的预检？ 预检由请求的“非简单请求”特征触发，关键看三点：

• Content-Type 值不是以下三者之一：text/plain、multipart/form-data、application/x-www-form-urlencoded
• 设置了自定义请求头（如 Authorization、X-Request-ID）
• 使用了非简单 HTTP 方法（如 PATCH、DELETE）

所以，若目标是模拟原生表单行为且跨域，应严格对齐：

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    // 不要加任何额外 header！尤其别加 'Content-Type'
  },
  body: new URLSearchParams({
    username: 'alice',
    email: 'a@example.com'
  })
})

这样 Content-Type 会自动设为 application/x-www-form-urlencoded，属于简单请求，跳过预检。

后端必须响应 OPTIONS 请求的哪些关键头？ 即使前端没触发预检，某些浏览器或代理仍可能发 OPTIONS（尤其开发环境热重载时）。后端必须能处理它，并返回明确许可：

• Access-Control-Allow-Origin：不能为 * 如果前端带 credentials（如 credentials: 'include'），需精确匹配域名
• Access-Control-Allow-Methods：至少包含 POST，多个用逗号分隔，如 POST,OPTIONS
• Access-Control-Allow-Headers：如果前端确实需要传 Authorization 等头，这里必须显式列出，否则预检失败
• Access-Control-Allow-Credentials：仅当需要 cookie 或 auth header 时设为 true，且此时 Access-Control-Allow-Origin 不能为 *

Nginx 示例配置片段：

if ($request_method = 'OPTIONS') {
  add_header Access-Control-Allow-Origin 'https://your-app.com';
  add_header Access-Control-Allow-Methods 'POST,OPTIONS';
  add_header Access-Control-Allow-Headers 'Authorization,DNT,User-Agent';
  add_header Access-Control-Allow-Credentials 'true';
  add_header Access-Control-Max-Age 86400;
  add_header Content-Length 0;
  add_header Content-Type 'text/plain; charset=utf-8';
  return 204;
}

表单 + iframe 方案能绕过 CORS 吗？ 可以，但只适用于“不需要读取响应内容”的场景（比如纯提交、跳转、或后端返回 HTML 页面）。原理是利用 iframe 的加载行为不触发跨域读取限制：

Submit

这种方式完全避开 fetch/XHR 的 CORS 机制，但代价是：你拿不到响应体、状态码、JSON 数据，也无法监听成功/失败。适合埋点、日志上报、或后端渲染跳转类操作。 真正难的不是配通预检，而是搞清自己到底需不需要读响应 —— 很多人硬上 fetch 却忘了原生表单其实更轻量、更健壮。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！