如何在JavaScript中提取POST自定义HTTP请求头并用于后续POST表单提交

问题场景回顾 #

用户需要通过JS从加载当前页面的POST /请求中提取自定义HTTP头X-CUSTOM-TOKEN，将其附加到自动生成并提交的表单POST请求中。原有的自动提交流程代码如下：

history.pushState('', '', '/');
document.body.innerHTML = `<html>
  <body style="background-color:black;">
    <form 
      id="foobar" 
      action="https://localhost:4449/" 
      method="POST" 
      enctype="multipart/form-data">
      <input type="hidden" name="access" value="true" />
      <input type="submit" value="Submit request" />
    </form>
  </body>
</html>`;
document.getElementById('foobar').submit();

该需求的特殊点在于目标自定义头仅在页面加载的POST请求中携带，不会出现在GET或其他方法的请求中，场景为学习HTTP相关JS实现逻辑的练习。

核心技术前提 #

浏览器运行环境中的前端JS，没有任何合法、稳定的接口可以读取加载当前页面的原始导航请求的HTTP头信息——无论这个导航请求是GET还是POST方法。这是浏览器出于安全隔离的底层设计，目的是避免恶意脚本窃取请求中携带的敏感凭证、会话标识等信息。你提到的X-CUSTOM-TOKEN作为页面加载时POST请求携带的自定义头，前端JS无法直接从请求流中解析获取。

可行实现路径 #

结合你的学习场景，可以按照以下逻辑完成需求：

• 第一步：由服务端中转传递Token值
  既然X-CUSTOM-TOKEN是客户端发起的、用来加载页面的POST请求携带的头，处理这个请求的服务端完全可以读取到这个头的值。在服务端返回HTML页面响应时，直接把这个值注入到页面内联的JS代码中：

  // 服务端渲染时替换为实际读取到的X-CUSTOM-TOKEN值
  const pageLoadedCustomToken = "从POST请求头提取的实际Token值";
  

  这是唯一稳定、不依赖浏览器私有行为的获取方式。

• 第二步：将Token附加到目标POST请求中
  原生HTML表单的submit()方法本身不支持自定义设置HTTP请求头，你可以根据实际的服务端接收要求二选一实现：

  • 方式一：将Token作为表单字段传递
    如果服务端可以从表单请求体中读取Token值，直接在生成表单时添加一个隐藏字段即可：

    // 拿到服务端注入的Token后，创建隐藏字段
    const tokenField = document.createElement('input');
    tokenField.type = 'hidden';
    tokenField.name = 'x-custom-token';
    tokenField.value = pageLoadedCustomToken;
    // 把字段插入目标表单
    document.getElementById('foobar').appendChild(tokenField);
    // 正常触发表单提交
    document.getElementById('foobar').submit();
    

  • 方式二：必须以自定义HTTP头的形式携带Token
    原生表单提交无法自定义请求头，此时需要把表单提交的逻辑替换为fetch请求，手动构造请求、附带自定义头：

    const targetForm = document.getElementById('foobar');
    // 拦截原生提交流程
    targetForm.addEventListener('submit', (e) => {
      e.preventDefault();
      // 将表单内容序列化为FormData对象
      const formPayload = new FormData(targetForm);
      // 构造带自定义头的POST请求
      fetch(targetForm.action, {
        method: 'POST',
        headers: {
          'X-CUSTOM-TOKEN': pageLoadedCustomToken
        },
        body: formPayload
      });
    });
    // 触发提交流程
    targetForm.requestSubmit();
    

常见误区说明 #

不要尝试通过performance.getEntriesByType之类的性能API间接解析导航请求的头信息。这类接口的返回值是经过浏览器裁剪的，不同浏览器会按照安全规则过滤掉自定义头内容，甚至随时调整返回的字段范围，完全无法作为稳定的实现方案。

实现细节提醒：原代码中直接调用form.submit()的行为，和用户手动点击提交按钮的行为存在差异——前者不会触发表单上绑定的submit事件监听器。如果采用自定义fetch的方式构造请求，需要使用requestSubmit()方法触发提交流程，保证绑定的拦截逻辑可以正常执行。

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