HTML5文件上传无法直接设置请求头，必须用XMLHttpRequest或fetch手动构造请求；XMLHttpRequest需在open后、send前调用setRequestHeader设自定义头，send FormData时浏览器自动设Content-Type；fetch不可手动设Content-Type，否则报错，且需后端正确配置CORS响应头。
HTML5 上传时无法直接设置请求头，必须用 XMLHttpRequest 或 fetch
HTML5 原生的 <input type="file"> 本身不支持添加自定义请求头。点击上传触发的是浏览器默认表单提交（multipart/form-data），此时你连 Content-Type 都无法手动设——浏览器会自动加 boundary。真要带 Authorization、X-Upload-ID 这类头，必须绕过表单提交，改用 JS 主动构造请求。
用 XMLHttpRequest 上传并设请求头的正确写法
这是最稳妥、兼容性最好的方式，尤其适合需要进度监听或旧版浏览器支持的场景。关键点在于：不能用 FormData.append() 后直接 send(FormData)——那样会触发浏览器自动设置 Content-Type: multipart/form-data; boundary=...，导致你之前 setRequestHeader 的头被忽略或报错（如 Chrome 报 Refused to set unsafe header "Content-Type"）。
- 先创建
XMLHttpRequest实例 - 调用
open("POST", url)，不要设第三个参数为false（同步已废弃） -
在
open()之后、send()之前 调用setRequestHeader()设置自定义头 - 用
new FormData()收集文件，但send()时直接传formData对象（此时浏览器仍会自动设Content-Type，但这是允许的；你设的其他头如Authorization会保留）
const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.setRequestHeader("Authorization", "Bearer abc123");
xhr.setRequestHeader("X-Client-Version", "2.1.0");
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("meta", JSON.stringify({type: "avatar"}));
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
console.log(`上传中: ${e.loaded}/${e.total}`);
}
};
xhr.onload = () => {
if (xhr.status === 200) {
console.log("上传成功", xhr.responseText);
}
};
xhr.send(formData);
用 fetch 上传并设请求头？小心 Content-Type 冲突
fetch 看似更现代，但对 FormData 的处理更严格：一旦你手动设置了 Content-Type 头，浏览器就会拒绝发送请求（报 TypeError: Failed to execute 'fetch' on 'Window': Invalid value for Content-Type header）。这是因为 FormData 必须由浏览器自动生成带 boundary 的 Content-Type，你不能覆盖它。
- 可以设
Authorization、X-Request-ID等非禁止头 - 绝对不要手动 set
Content-Type—— 让 fetch 自动推导 - 如果后端要求特定
Content-Type（比如application/json），那就不能用FormData，得把文件转成Blob或ArrayBuffer再发，此时你才能完全控制头和 body
const formData = new FormData();
formData.append("file", fileInput.files[0]);
fetch("/upload", {
method: "POST",
headers: {
"Authorization": "Bearer abc123",
"X-Trace-ID": "req-789"
// ❌ 不要加 "Content-Type": "multipart/form-data"
},
body: formData
})
.then(r => r.json())
.then(console.log);
后端接收时注意：XMLHttpRequest 和 fetch 发的 multipart 没区别，但 CORS 头必须配全
无论用哪种前端方式，只要带了自定义请求头（如 Authorization），浏览器就会先发一个 OPTIONS 预检请求。后端必须返回正确的 CORS 响应头，否则请求直接被拦在浏览器层：
立即学习“前端免费学习笔记（深入）”；
-
Access-Control-Allow-Origin不能是通配符*（当带认证头时） - 必须显式声明
Access-Control-Allow-Headers，包含你实际用的头名，如Authorization, X-Client-Version - 如果需要 Cookie 或认证信息，前端 fetch 要加
credentials: "include"，后端还得回Access-Control-Allow-Credentials: true
漏掉任意一项，控制台就会显示 No 'Access-Control-Allow-Headers' header is present 或类似跨域错误——这时候前端代码再对也没用。
