原生 <form> 提交可跨域且不触发 CORS，因属导航行为；若需 JS 读响应，必须用 fetch + FormData 并配置服务端 CORS，或采用同源 <iframe> + postMessage 方案。
原生 <form> 提交能跨域，但 JS 拿不到响应
能发出去，不报 CORS 错误，也不需要服务端配 Access-Control-Allow-Origin——因为这是导航行为，不是 AJAX。浏览器直接跳转到目标域名，当前页 JS 上下文销毁，自然读不到返回的 JSON、状态码或登录态。
常见错误现象：
- 控制台没报错，但提交后页面白屏或跳转失败 → 服务端返回了 500 或重定向到了不存在的路径
- 想用
fetch模拟表单却看到 OPTIONS 请求失败 → 你其实没用原生<form>，而是写了 JS 拦截，此时已进入 CORS 场景 - 填了
action="https://api.example.com/submit"却 404 → action 是完整 URL，但服务端没暴露该路径或没处理 POST
要留在当前页读响应？必须换 fetch + FormData
这是唯一可控路径：阻止默认提交，手动构造请求，再解析响应体。但服务端必须配合 CORS 配置，否则浏览器静默拒绝。
关键实操点：
立即学习“前端免费学习笔记（深入）”；
- 用
new FormData(formEl)自动提取字段（含<input type="file">），别手拼URLSearchParams——后者不支持文件 - 不要手动设
Content-Type头；FormData会自动生成multipart/form-data并带正确boundary，否则触发预检 - 若需携带 Cookie，前端加
credentials: 'include'，服务端Access-Control-Allow-Origin就不能是*，得写具体域名，如https://fe.example.com - 服务端必须响应 OPTIONS 请求，至少返回：
Access-Control-Allow-Methods: POST,OPTIONS、Access-Control-Allow-Headers: Content-Type（如果前端没加额外 header，可省略此头）
不想改代码又不想跳转？<iframe> + target 是唯一同源方案
它不解决跨域读取，而是绕过：把响应内容限制在同源 iframe 内，再用 postMessage 把结果“传回来”。前提是服务端配合返回 HTML 页面，不是纯 JSON。
必须满足的条件：
-
<form target="my-iframe">和<iframe name="my-iframe">必须同源（比如都托管在https://fe.example.com） - 服务端响应必须是
Content-Type: text/html，且内嵌脚本：window.opener?.postMessage({ success: true }, "https://fe.example.com") - 当前页监听
message事件时，必须校验event.origin，防止恶意 iframe 注入 - 若服务端内部做了 302 重定向，且跳转目标是跨域地址，iframe 会加载失败并触发同源策略报错，无法继续执行脚本
最容易被忽略的坑：凭证、预检、重定向三者混在一起
很多人卡在“明明配了 CORS 却还是拿不到响应”，问题往往出在组合场景：
- 前端用了
credentials: 'include'，但服务端Access-Control-Allow-Origin还是*→ 浏览器直接拒收响应，连 status 都看不到 - POST 提交带文件，
FormData自动生成了multipart头，但服务端没处理 OPTIONS 或漏了Access-Control-Allow-Headers: Content-Type→ 预检 404，后续 POST 根本不发 - 服务端处理完 POST 后返回 302 跳转，前端 fetch 收到的是重定向响应（status 302），而不是最终页面内容；若想拿到跳转后的内容，得手动
follow: false并再发一次 GET，但跨域 GET 同样受 CORS 约束
这些点单独看都简单，串起来就容易漏掉一环。调试时优先确认：请求到底发没发出（Network 面板看 method 和 status）、服务端日志有没有收到、浏览器控制台有没有明确的 CORS 报错信息。
