HTML表单无法设置自定义请求头，因浏览器安全模型禁止原生表单提交时注入如Authorization等header；必须改用fetch或XMLHttpRequest配合event.preventDefault()、FormData及显式headers配置实现。
HTML表单本身不能设置自定义请求头
HTML <form> 标签没有能力在提交时添加或修改 HTTP 请求头，比如 Authorization、X-API-Key 或 X-CSRF-Token。浏览器原生表单提交（无论 method="POST" 还是 method="GET"）只支持固定头：Content-Type（由 enctype 决定）、Origin、Referer 等，开发者无法注入任意 header。
为什么不能用 form action + 自定义 header
这是浏览器安全模型的硬性限制：防止网页脚本在用户不知情下携带敏感凭证发起跨域请求。如果 HTML 表单能自由写 header，就等于绕过 CORS 和同源策略防线。
-
form提交本质是导航行为（类似页面跳转），不是程序可控的请求 - 即使你写
<form action="https://api.example.com/login" method="POST">，也无法让浏览器在请求中带上Authorization: Bearer xxx - 试图用
<meta http-equiv="...">或 JS 修改document.headers都无效——DOM 没有这个 API
替代方案：必须用 fetch 或 XMLHttpRequest
要传递认证信息，唯一可靠路径是放弃原生 <form> 提交，改用 JavaScript 发起带 header 的请求。关键点：
- 监听
submit事件，调用event.preventDefault() - 收集表单字段用
new FormData(form)或手动拼JSON.stringify() - 用
fetch()显式传 header：headers: { 'Authorization': 'Bearer ' + token } - 后端必须支持 CORS，且允许该 header：
Access-Control-Allow-Headers: Authorization - 注意：CSRF token 若存在，也得手动塞进 header 或 body，不能再依赖隐藏字段自动提交
示例片段：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
form.addEventListener('submit', async e => {
e.preventDefault();
const token = localStorage.getItem('auth_token'); // 或从 cookie / session 读
const res = await fetch('/api/submit', {
method: 'POST',
headers: { 'Authorization': `Bearer ${token}` },
body: new FormData(form)
});
});
容易被忽略的兼容性陷阱
看似简单，但实际落地常踩坑：
-
FormData在fetch中自动设置Content-Type: multipart/form-data，但后端若只接受application/json，就得先Object.fromEntries(new FormData(form))转对象再JSON.stringify() - Bearer token 存在
localStorage有 XSS 风险；存httpOnly cookie则fetch默认不带 credential，需加credentials: 'include' - 移动端 Safari 对
fetch的redirect: 'manual'处理异常，登录成功后跳转可能失败 - 表单里含文件上传时，
FormData是唯一安全方式；别尝试把文件转 base64 塞 JSON —— 体积暴增且服务端解析负担重
真正难的不是“怎么加 header”，而是 header 加了之后，整个请求生命周期（鉴权、CSRF、错误处理、重定向、缓存）都得重新设计，不能套用传统表单逻辑。
