原生form标签无法实现跨域身份验证，因其提交不携带cookie且无法获取响应；必须改用fetch等javascript请求配合正确cors配置（access-control-allow-origin非通配符+credentials:true）才能完成带凭证的跨域认证。
form 标签本身不支持跨域身份验证
HTML <form></form> 提交天然不受同源策略拦截，但它也不携带凭证（如 Cookie）到跨域目标，除非你用 target + <iframe></iframe> 配合后端返回 Access-Control-Allow-Credentials: true —— 但这行不通。浏览器明确禁止 JS 读取跨域 <iframe></iframe> 的内容，所以你无法拿到响应体、状态码或登录态更新。
真正能做身份验证的，是 JavaScript 发起的请求（比如 fetch），而不是原生 <form></form>。如果你看到“form 跨域带 cookie”，那要么是目标域名其实同源（比如 app.example.com → api.example.com 且已设 document.domain），要么是后端用了代理中转，前端根本没跨域。
-
<form action="https://other.com/login" method="POST"></form>可以发出去，但页面跳转后 JS 就失效了，无法检查是否登录成功 - 想保留当前页并验证身份？必须改用
fetch或XMLHttpRequest，配合后端返回正确的 CORS 头 - 如果非要用
<form></form>，唯一可行路径是让后端提供同域中转接口（如/api/forward-login），由它代理请求并回传结果
credentials: 'include' 和 Access-Control-Allow-Origin 冲突怎么办
当你在 fetch 中加了 credentials: 'include'，后端就必须返回 Access-Control-Allow-Origin: https://yourdomain.com（不能是 *），否则浏览器直接拒绝响应。这是硬性限制，不是配置遗漏。
常见错误现象：Failed to fetch 或控制台报 The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'。
- 后端 Spring Boot 用户注意：别只在 Controller 方法上加
@CrossOrigin(origins = "*")，得配@CrossOrigin(origins = "https://localhost:5173")或注册全局CorsConfigurationSource - Node.js + Express 用户：用
cors({ origin: 'https://localhost:3000', credentials: true })，别漏掉credentials: true - Vite 开发期可绕过：用
server.proxy把/api代理到真实后端，此时请求不跨域，credentials自然生效
表单提交后如何安全获取身份验证结果
阻止默认提交、改用 fetch 是唯一可控方式。关键点不是“怎么发”，而是“怎么处理响应和错误”。
示例代码里最容易漏的是：没检查 res.ok，或没处理 401/403 状态码，导致登录失败却无提示。
- 必须显式设置
mode: 'cors'，尤其配合credentials: 'include'时，默认值不够可靠 - 后端返回 JSON，前端就用
await res.json()；若返回纯文本或重定向，res.text()或res.redirected才能判断 - 如果后端用 302 跳转登录页，
fetch不会自动跟随（redirect: 'follow'仅对同域有效），跨域跳转会失败，应改用后端返回状态码 + 前端跳转 - CSRF Token 必须随请求一起发：放在
headers里（如headers: { 'X-CSRF-Token': token }），不能只靠 Cookie
video/audio 的 crossorigin 属性和 form 没关系，但容易混淆
有人看到 <video crossorigin="use-credentials"></video> 就以为 form 也能这么配 —— 不行。crossorigin 是媒体元素专属属性，只影响资源加载和 JS 对 duration、buffered 等属性的访问权限，和表单提交、身份验证完全无关。
如果你在调试表单登录时顺手给 <video></video> 加了 crossorigin 却发现登录失败，大概率是误以为它会影响表单行为，实际问题还在后端 CORS 配置或前端请求逻辑里。
真正要盯住的只有三件事：请求是否带凭证、响应头是否匹配、JS 是否正确读取了响应体。其他标签属性再像，也不参与身份验证流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
