HTML表单提交时通过Custom Headers传递参数的HTML层封装方案-html教程-PHP中文网

html原生表单不支持自定义请求头，这是浏览器安全限制；必须改用fetch+formdata模拟提交，或通过服务端中转代理实现。

html表单提交时通过custom headers传递参数的html层封装方案

HTML原生表单不支持自定义请求头（Custom Headers），这是浏览器安全模型的硬性限制，不是写法或配置问题。想在表单提交时加 Authorization、X-Request-ID 等 header，必须换方案。

为什么 `form.submit()` 无法设置 Custom Headers

浏览器对 <form></form> 的 submit() 行为做了严格约束：它只构造标准 HTTP POST/GET 请求，自动设置 Content-Type: application/x-www-form-urlencoded（或 multipart/form-data），但禁止脚本干预请求头。这是同源策略和 CSRF 防护的一部分，无法绕过。

form.action 和 form.method 只控制目标 URL 和动词，不暴露 header 控制权
form.enctype 只能间接影响 Content-Type，不能新增 header
任何尝试在 submit 前用 JS 修改 header（如 form.headers = {...}）都会被忽略

替代方案：用 `fetch()` + `FormData` 模拟表单提交

这是最常用、兼容性好（Chrome 42+、Firefox 39+、Safari 10.1+）、且能完全控制 header 的方式。关键点是复用原有表单 DOM 结构，不破坏语义和可访问性。

保留 <form></form> 标签和所有 name 属性，确保无障碍支持和无 JS 降级能力
拦截 submit 事件，阻止默认行为：event.preventDefault()
用 new FormData(formElement) 提取数据，自动处理 input、select、textarea 和文件字段
调用 fetch(url, { method: 'POST', headers: { 'Authorization': 'Bearer xxx' }, body: formData })

示例片段：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

document.querySelector('form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const response = await fetch(this.action, {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('token'),
      'X-Trace-ID': Date.now().toString()
    },
    body: formData
  });
});

注意 `FormData` 与 `JSON` 的 Content-Type 差异

直接把 FormData 丢给 fetch 时，浏览器会自动设置 Content-Type: multipart/form-data; boundary=...，后端需按此格式解析。如果后端只认 application/json，就不能用 FormData，得手动序列化：

用 Object.fromEntries(new FormData(form)) 转成普通对象
再用 JSON.stringify() 编码，并显式设置 headers: { 'Content-Type': 'application/json' }
但注意：文件字段会丢失——File 对象不能直接 JSON 序列化，必须用 FormData 或分步上传