标准HTML POST表单提交时如何添加Authentication Header认证信息？

1. 表单提交时主动附带JWT #

• 你可以先把存在localStorage、sessionStorage或者Cookie里的JWT，通过JS注入到表单的隐藏输入框里，后端直接从POST参数里取token校验即可，示例代码如下：

<form id="targetForm" action="/your-submit-path" method="POST">
  <!-- 业务输入框 -->
  <input type="text" name="content" required>
  <!-- 隐藏的JWT传输字段 -->
  <input type="hidden" name="jwt_token" id="jwtInput">
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('targetForm').addEventListener('submit', function() {
  // 从本地存储取出JWT注入隐藏字段
  const token = localStorage.getItem('your_jwt_storage_key');
  if (token) {
    document.getElementById('jwtInput').value = token;
  }
})
</script>

• 如果你的JWT原本就存在HttpOnly Cookie里（无法通过JS读取），不需要额外做前端处理，原生表单提交时Cookie会自动附带在请求头中，后端直接从Cookie里取token校验即可，只要提前和后端约定好Cookie的存储键名即可。

2. 无JS场景的原生表单兼容 #

如果业务场景不允许使用JS操作，还可以在服务端渲染表单页面时，直接把当前用户的JWT预填充到隐藏输入框中，用户提交表单时会自动携带token，不需要前端额外处理。

注意事项 #

• 不要把JWT放在GET请求的URL参数中传输，会有泄露风险，表单method统一用POST即可。
• 如果用隐藏输入框传输JWT，要做好页面XSS防护，避免token被恶意脚本窃取。
• 后端JWT校验逻辑和普通API请求的校验逻辑完全一致，不需要额外改造，只要约定好token的获取位置（POST参数/Cookie）即可。

内容的提问来源于stack exchange，提问作者egx