表单提交无法携带Authorization头，因浏览器自动构造请求且不支持自定义HTTP头；必须用XMLHttpRequest或fetch主动发请求，其中XMLHttpRequest更稳定，fetch需避免手动设置Content-Type。
不能用 <form> 直接加认证头，必须用 JavaScript 主动发请求；XMLHttpRequest 是最稳的选择，fetch 容易因 Content-Type 冲突失败。
为什么表单提交没法带 Authorization 头
浏览器对 <form method="post" enctype="multipart/form-data"> 的处理是黑盒行为：它自动构造请求、设置 Content-Type: multipart/form-data; boundary=...，且完全不支持你在 HTML 层添加任意 HTTP 头。哪怕你用 addEventListener('submit', e => { e.preventDefault(); ... }) 拦住表单，再用 fetch 提交，也得自己构造凭证——表单本身不携带头信息。
常见错误现象：
- 在
<input type="hidden" name="Authorization" value="Bearer xxx">里塞 token → 后端收到的是表单字段，不是 HTTP 头，校验直接失败 - 用
fetch提交new FormData(form)却在headers里设Content-Type→ 浏览器报TypeError: Invalid value for Content-Type header
XMLHttpRequest 设置 Authorization 头的正确顺序
关键不是“能不能设”，而是“什么时候设”。setRequestHeader 必须在 open() 之后、send() 之前调用，且不能碰 Content-Type（浏览器会自动设，强行覆盖会触发 Refused to set unsafe header）。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 先调
xhr.open("POST", "/upload")，不要传第三个参数（同步已废弃） - 紧接着调
xhr.setRequestHeader("Authorization", "Bearer " + token)，其他自定义头如X-Client-Version也在这一步加 -
FormData正常构建，append文件和元数据都 OK - 最后调
xhr.send(formData)—— 此时浏览器自动补Content-Type，但你设的其他头全保留
fetch 上传带 token 的避坑写法
fetch 看似简洁，但对 FormData 的头管理更严格：它允许你设 Authorization，但**绝对禁止手动设 Content-Type**。只要你在 headers 里写了 Content-Type，哪怕值是对的，也会直接报错。
安全写法只有一条路径：
- 不写
Content-Type字段，让浏览器自动加 - 把
Authorization放进headers对象里 -
body直接传formData，别转成 JSON 或 Blob - 后端必须返回正确的 CORS 响应头，尤其是
Access-Control-Allow-Headers: Authorization
示例片段：
const formData = new FormData();
formData.append("file", file);
formData.append("meta", JSON.stringify({type: "avatar"}));
<p>fetch("/upload", {
method: "POST",
headers: {
"Authorization": <code>Bearer ${token}</code>
// 不要加 Content-Type！
},
body: formData
});token 过期和前端存储风险
很多人把 localStorage.getItem("auth_token") 当成万能解，但实际线上最容易被忽略的不是怎么传，而是 token 什么时候失效、谁来刷新。
典型盲区：
- 用户打开页面后闲置 15 分钟，再点上传 → token 已过期，后端返回 401，前端没做拦截，用户只看到“上传失败”
- token 存 localStorage，但没配
HttpOnly→ XSS 攻击可直接盗取 - 上传前没检查
exp字段，导致每次上传都触发一次无效鉴权请求，徒增后端压力
建议在调用上传前加一层简单校验：const payload = JSON.parse(atob(token.split(".")[1])); if (payload.exp * 1000 。这不是银弹，但能拦掉大部分静默失败。
