HTML5怎样自定义上传请求头_HTML5自定义请求头上传法【定制】_技术教程

HTML5文件上传无法直接设置请求头，必须用XMLHttpRequest或fetch手动构造请求；XMLHttpRequest需在open后、send前调用setRequestHeader设自定义头，send FormData时浏览器自动设Content-Type；fetch不可手动设Content-Type，否则报错，且需后端正确配置CORS响应头。

HTML5 上传时无法直接设置请求头，必须用 `XMLHttpRequest` 或 `fetch`

HTML5 原生的本身不支持添加自定义请求头。点击上传触发的是浏览器默认表单提交（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 或类似跨域错误——这时候前端代码再对也没用。