html表单提交无法自动携带token，因原生form不发送自定义http头；需用fetch或xmlhttprequest手动在headers中传authorization，且content-type须由浏览器自动设置。
HTML 本身不发送 Token，真正起作用的是你用 fetch 或 XMLHttpRequest 构造请求时，手动把 Token 塞进请求头或 body；表单直接 <form method="POST"></form> 提交文件时，默认不带任何认证头，也不会自动读 localStorage 里的 Token。
为什么 <form></form> 提交文件无法自动带 Token
浏览器原生表单提交（enctype="multipart/form-data"）只发字段值，不发自定义 HTTP 头，Authorization 头完全被忽略。如果你看到“Token 无效”，大概率是后端在 header 里找 Authorization，但前端却把它塞进了 FormData 的某个字段（比如 formData.append('token', token)），或者压根没传。
- 表单提交 ≠ API 请求：它走的是传统 HTML 表单语义，不是 RESTful 风格
-
localStorage.getItem('token')不会自动注入到表单请求中——必须手动读、手动拼 - 如果后端校验逻辑只认
Authorization: Bearer xxx，那表单 POST 里放 hidden 字段就白搭
用 fetch 上传文件并带 Token 的正确写法
这是目前最主流、可控性最强的方式。关键点：用 FormData 包文件，用 headers 传 Token，且 Content-Type 必须交给浏览器自动设置（不能手动设，否则 multipart 会坏）。
- ✅ 正确：
fetch(url, { method: 'POST', body: formData, headers: { 'Authorization': 'Bearer ' + token } }) - ❌ 错误：手动加
'Content-Type': 'multipart/form-data'—— 浏览器会覆盖并出错 - ❌ 错误：把 Token 当成字段塞进
formData.append('token', token)，而后端却从 header 解析 - ⚠️ 注意：
token必须是有效未过期的字符串，前端可先用JSON.parse(atob(token.split('.')[1])).exp粗略检查有效期
用 XMLHttpRequest 上传并设 Authorization 头
适合需要细粒度监听进度（upload.onprogress）的老项目或兼容需求。和 fetch 类似，Token 必须走 header，不能混进 body。
- ✅ 正确：调用
xhr.setRequestHeader('Authorization', 'Bearer ' + token)，再xhr.send(formData) - ❌ 错误：在
send()前没调用setRequestHeader，或在send()里传字符串而非FormData - ⚠️ 兼容提示：IE10+ 支持
FormData和setRequestHeader，但 IE9 及以下不支持 multipart 上传带 header，得退化用 iframe 方案
iframe 模拟无刷新上传时怎么传 Token
这种方案本质是“骗”浏览器：把表单 target 指向隐藏 <iframe></iframe>，避免页面跳转。但它依然不发 header，所以 Token 只能靠后端渲染时注入 hidden 字段，或改服务端逻辑去读 cookie / query 参数。
- ✅ 可行路径：后端在返回上传页 HTML 时，把 Token 注入为
<input type="hidden" name="token" value="{{ jwt_token }}">，服务端从request.form['token']读 - ❌ 危险操作：前端 JS 读 localStorage 写进 hidden 字段再提交 —— 这等于把 Token 暴露给任意 XSS 脚本
- ⚠️ 关键限制：该方式无法防 CSRF，必须额外配 CSRF Token，JWT 在这里只是身份凭证，不是安全屏障
最易被忽略的一点：后端验证逻辑必须和前端传输方式严格对齐。你用 header 传，后端就得从 req.headers.authorization 解；你用 form 字段传，后端就得从 req.body.token 或 req.form.token 取。前后端各写各的，不出问题才怪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
