HTML原生表单无法设置自定义请求头，这是浏览器安全策略的硬性限制；必须用fetch或XMLHttpRequest等脚本方式发起请求才能控制Authorization、X-Trace-ID等headers，且FormData会自动设置Content-Type，不可手动覆盖。
HTML原生表单无法设置自定义请求头
直接说结论：用 + submit() 的方式，浏览器根本不允许你添加 Authorization、X-Trace-ID 等自定义请求头。这是浏览器安全策略硬性限制，不是写法问题，也不是漏了某个属性。
表单提交走的是“导航式请求”（navigation request），和 fetch 或 XMLHttpRequest 这类“资源请求”（resource request）有本质区别。前者由浏览器内核接管，只暴露 method、action、enctype 三个可控入口，其余请求头（比如 Origin、Referer、Cookie）全由浏览器自动加，你写的 setRequestHeader 或 headers 配置完全不生效。
常见错误现象包括：
- 写了
form.addEventListener('submit', e => { e.preventDefault(); fetch(..., { headers: {...} }) })却仍跳转——忘了调e.preventDefault()，或事件绑定在错误元素上 - 用
document.createElement('form')动态构造后form.submit()，以为能插 headers——实际仍是原生提交，headers 被忽略 - 后端日志里收不到
Authorization头，但fetch测试能通——说明问题不在后端配置，而在前端提交方式本身
想带 headers，必须用 fetch 或 XMLHttpRequest
唯一可行路径是放弃原生表单提交行为，改用脚本主动发请求。这时你才能真正控制 headers，但要注意几个关键点：
-
fetch发送FormData时，Content-Type会自动设为multipart/form-data; boundary=...，你不能手动设置该头，否则会报错Refused to set unsafe header "Content-Type" - 如果后端只认
application/json，得先用Object.fromEntries(new FormData(form))转对象，再JSON.stringify()，同时把Content-Type设为application/json -
XMLHttpRequest更底层，支持进度监听，setRequestHeader必须在open()之后、send()之前调用，且不能覆盖浏览器自动设置的安全头（如Content-Type） - 无论用哪种方式，跨域时都依赖后端正确响应
Access-Control-Allow-Origin和Access-Control-Allow-Headers，否则预检（OPTIONS）直接 403
示例（fetch 带 token 提交）：
form.addEventListener('submit', async e => {
e.preventDefault();
const token = localStorage.getItem('token');
const data = new FormData(form);
const res = await fetch(form.action, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`
// 不要加 'Content-Type' —— FormData 会自动处理
},
body: data
});
});
enctype 影响 headers 中的 Content-Type
虽然不能加自定义头，但 enctype 属性会间接决定浏览器发出去的 Content-Type 请求头内容，这点常被误认为“能设头”：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
enctype="application/x-www-form-urlencoded"→Content-Type: application/x-www-form-urlencoded（默认值，GET 表单也走这个） -
enctype="multipart/form-data"→Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...（含文件必选） -
enctype="text/plain"→Content-Type: text/plain（极少用，仅用于调试）
注意：enctype 只影响 Content-Type，对其他头（如 Authorization）完全无作用。如果你看到某次提交带了自定义头，那一定是用了 fetch/XHR，而不是原生表单行为。
为什么 windowPost 函数加不了 headers
你贴的 windowPost 函数本质还是创建 并调 submit()，属于标准原生提交流程。即使把 data 拼成隐藏字段，最终发出的请求仍是浏览器导航请求，headers 完全不可控。
这个函数唯一能影响的只有请求体内容（通过 input.value），而 headers 是浏览器在构造请求时就锁定的，JS 在此时已无权干预。试图在 form 上挂 headers 属性、或给 input 加 data-header 都无效。
真要复用类似逻辑，只能把它改造成 fetch 封装：
async function windowPost(url, data) {
const token = localStorage.getItem('token');
const formData = new FormData();
for (const [key, value] of Object.entries(data)) {
formData.append(key, value);
}
const res = await fetch(url, {
method: 'POST',
headers: { 'Authorization': `Bearer ${token}` },
body: formData
});
return res;
}
最后提醒一句：别在 FormData 里塞对象或数组直接 append，formData.append('inputs', {}) 会转成 [object Object] 字符串——得先 JSON.stringify 再 append，后端再解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
