跨域文件上传报错本质是浏览器对fetch/XMLHttpRequest的同源策略限制，而非HTML问题；form提交不报错因属导航行为，JS无法读取响应，而JS上传需服务端正确配置CORS头（含OPTIONS预检、credentials匹配、完整响应头等）才能成功。
跨域文件上传报错，本质不是HTML的问题，而是浏览器对 fetch 或 XMLHttpRequest 的同源策略限制——HTML本身不发起请求，真正卡住的是JS上传逻辑。服务端没配好CORS头，前端再怎么写表单或FormData都白搭。
为什么 form 提交不报错但拿不到结果
原生 <form> 提交天然跨域（比如 action="https://upload.example.com"），但这是“导航级”行为：页面会跳转或在 <iframe> 中加载响应，JS 无法读取返回内容。一旦你用 fetch 或 XMLHttpRequest 发起上传并试图调用 response.json()，浏览器立刻检查CORS，缺头就直接拦截，控制台只显示“blocked by CORS policy”。
- 错误典型表现：
Access to fetch at 'https://upload.example.com' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present -
<form target="hidden-iframe">可绕过JS读取限制，但后续回调需靠URL参数或服务端重定向回前端页面（如?cb=https://myapp.com/upload-done） - 若必须用JS控制流程（如进度条、错误重试），就不能依赖纯表单，得走CORS正路
fetch 上传时 credentials 和 Content-Type 容易踩坑
FormData 自动设置 Content-Type: multipart/form-data; boundary=...，手动覆盖会导致后端解析失败；而是否携带 Cookie 或认证头，全看 credentials 配置是否和服务端响应头匹配。
- 前端必须显式写
credentials: 'include'（不能省略或写'same-origin'），否则即使服务端返回了Set-Cookie，浏览器也不会发过去 - 服务端
Access-Control-Allow-Origin不能为*，必须精确到源，例如https://myapp.com；否则和credentials: 'include'冲突，浏览器直接拒绝 - 不要手动设置
headers: { 'Content-Type': 'multipart/form-data' }——FormData会生成带boundary的正确类型，硬设反而让服务端收不到文件字段
服务端漏掉的三个关键响应头
CORS 不是加一个 Access-Control-Allow-Origin 就完事。尤其文件上传常涉及预检（OPTIONS），服务端若没返回完整头集，连主请求都不会发出。
立即学习“前端免费学习笔记（深入）”；
-
Access-Control-Allow-Methods: POST, OPTIONS—— 必须包含OPTIONS，否则预检失败 -
Access-Control-Allow-Headers: Content-Type, X-Requested-With—— 若前端额外加了自定义头（如X-Upload-ID），这里也要列出来 -
Access-Control-Expose-Headers: X-Upload-ID, X-File-Size—— 前端想用response.headers.get('X-Upload-ID')读自定义头，就必须暴露，否则读出来是null
Canvas 图片上传前被污染导致 toDataURL 失败
如果上传前先用 <img> 加载了跨域图片并绘到 <canvas>，再调 canvas.toDataURL()，会报 Tainted canvases may not be exported。这不是上传报错，但常被误认为是上传环节的问题。
- 修复方式很简单：给
<img>加crossorigin="anonymous"属性，并确保图片服务器返回了Access-Control-Allow-Origin - 注意：CDN 图片（如七牛、阿里云OSS）默认不返回CORS头，需单独配置 bucket 的 CORS 规则，且允许的源不能写
*（如果前端要传凭证） - 动态创建的
Image对象也要设img.crossOrigin = 'anonymous'，否则照样污染
最常被忽略的一点：预检请求（OPTIONS）是否真被后端处理了。Spring Boot 2.4+、Express 默认不响应 OPTIONS，光配 @CrossOrigin 或 app.use(cors()) 可能只覆盖了实际接口路径，漏掉预检路由。务必确认 OPTIONS /upload 能返回 200 和全部CORS头，而不是 404 或 405。
