HTML文件上传怎么添加自定义安全认证头-html教程-PHP中文网

表单提交无法携带authorization头，因浏览器自动构造请求且不支持自定义http头；必须用xmlhttprequest或fetch主动发请求，其中xmlhttprequest更稳定，fetch需避免手动设置content-type。

html文件上传怎么添加自定义安全认证头

不能用 <form></form> 直接加认证头，必须用 JavaScript 主动发请求；XMLHttpRequest 是最稳的选择，fetch 容易因 Content-Type 冲突失败。

为什么表单提交没法带 Authorization 头

浏览器对 <form method="post" enctype="multipart/form-data"></form> 的处理是黑盒行为：它自动构造请求、设置 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，哪怕值是对的，也会直接报错。

HTML Extract

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

下载

安全写法只有一条路径：

不写 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
});</p>