HTML原生文件上传无法设置自定义请求头，因浏览器限制表单提交仅允许白名单头部；必须用fetch或XMLHttpRequest主动构造请求，且Content-Type须由浏览器自动设置。

HTML原生文件上传无法设置自定义请求头，这是浏览器的硬性限制——<input type="file"> 触发的表单提交行为不支持注入 Authorization、X-Request-ID 等任意 header。必须用 JavaScript 主动构造请求。

为什么

加不了自定义 header

原生 <form> 提交本质是页面导航行为，浏览器只允许发送“简单请求”（simple request），头部被严格限制在白名单内：Accept、Content-Type、Content-Language 等。像 Authorization 这类敏感头，即使你写 headers: {"Authorization": "..."} 也根本不会出现在实际请求中。

• 试图用 fetch + FormData 并手动设 Content-Type 会直接报错：TypeError: Failed to execute 'fetch' on 'Window': Invalid value for Content-Type header
• <meta http-equiv> 或修改 document.headers 完全无效——DOM 根本没有这个 API
• 浏览器自动注入的 Origin、Referer、Host、Content-Length 等头，你写了也会被忽略或覆盖

用 fetch 发送带 header 的文件上传（推荐）

这是现代项目首选方案，但要注意 Content-Type 必须交给浏览器自动处理，不能手动指定。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 创建 FormData 实例，append 文件和其他字段（如 formData.append("file", file)）
• 构造 headers 对象时，**不要包含 Content-Type**；浏览器检测到 body 是 FormData 会自动设为 multipart/form-data; boundary=...
• 其他 header 如 Authorization、X-Client-ID 可以正常传入
• token 动态读取时，建议用 Headers 构造器而非 plain object，避免大小写不一致问题

const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("desc", "avatar upload");

const headers = new Headers({
  "X-Client-ID": "web-v2"
});
const token = localStorage.getItem("auth_token");
if (token) {
  headers.set("Authorization", `Bearer ${token}`);
}

fetch("/api/upload", {
  method: "POST",
  headers,
  body: formData
});

用 XMLHttpRequest 上传并设 header（兼容旧浏览器）

适合需要上传进度监听、或需支持 IE11 等老环境的场景。关键顺序不能错：必须在 open() 之后、send() 之前调用 setRequestHeader()。

立即学习“前端免费学习笔记（深入）”；

• setRequestHeader("Authorization", "Bearer xxx") 是安全的，浏览器允许
• 不要尝试 setRequestHeader("Content-Type", ...) —— Chrome 会报 Refused to set unsafe header "Content-Type"
• 传 FormData 给 send() 时，浏览器仍会自动加正确的 Content-Type，你设的其他 header 会被保留
• 利用 xhr.upload.onprogress 可实时获取上传进度

const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.setRequestHeader("Authorization", "Bearer abc123");
xhr.setRequestHeader("X-Upload-ID", "u-789");

const formData = new FormData();
formData.append("file", fileInput.files[0]);

xhr.upload.onprogress = (e) => {
  if (e.lengthComputable) {
    console.log(`上传中: ${e.loaded}/${e.total}`);
  }
};

xhr.onload = () => {
  if (xhr.status === 200) {
    console.log("上传成功");
  }
};

xhr.send(formData);

真正容易被忽略的点是：header 设置时机和 Content-Type 的处置权归属。不是“没写对”，而是浏览器根本不给你插手的机会——它只允许你在特定位置、对特定字段施加影响。一旦混淆了“谁该负责什么”，就会卡在 silent failure 上，DevTools Network 面板里连 header 都看不到。