如何为原生HTML表单POST请求添加自定义请求头（如token）

用原生HTML表单通过form.submit()提交请求时，无法添加自定义请求头（比如你的token）。这是因为浏览器发起的传统表单提交请求，其请求头由浏览器自动生成，不允许通过JavaScript修改或添加自定义字段。

方案1：使用Fetch API发起AJAX请求（推荐） #

这种方式完全匹配你提供的CURL命令逻辑，支持自由设置请求头和JSON格式的请求体，是最贴合需求的方案。

const targetUrl = "你的目标URL";
const tokenValue = "TOKEN VALUE";
const requestData = {
  amount: 1000,
  expireInSeconds: 0,
  factorNumber: "string",
  redirectUrl: "string"
};

fetch(targetUrl, {
  method: "POST",
  headers: {
    "accept": "application/json",
    "token": tokenValue,
    "Content-Type": "application/json"
  },
  body: JSON.stringify(requestData)
})
.then(response => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
})
.then(data => {
  // 根据后端返回结果处理后续逻辑，比如跳转
  if (data.redirectUrl) {
    window.location.href = data.redirectUrl;
  }
})
.catch(error => {
  console.error("请求出错：", error);
});

注意：如果目标URL是跨域地址，需要后端配置CORS允许自定义token请求头和POST方法。

方案2：将Token作为隐藏表单字段提交（仅后端支持时可用） #

如果后端接受从请求体（而非请求头）获取token，可以把token作为隐藏字段加入表单，通过传统表单提交方式发送。但这种方式的请求格式是application/x-www-form-urlencoded，和你CURL里的application/json不一致，仅适用于后端兼容表单格式的场景。

var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", "你的目标URL");
form.setAttribute("target", "_self");

// 添加业务字段
var amountField = document.createElement("input");
amountField.setAttribute("type", "hidden");
amountField.setAttribute("name", "amount");
amountField.setAttribute("value", "1000");
form.appendChild(amountField);

var expireField = document.createElement("input");
expireField.setAttribute("type", "hidden");
expireField.setAttribute("name", "expireInSeconds");
expireField.setAttribute("value", "0");
form.appendChild(expireField);

// 添加token字段
var tokenField = document.createElement("input");
tokenField.setAttribute("type", "hidden");
tokenField.setAttribute("name", "token");
tokenField.setAttribute("value", "TOKEN VALUE");
form.appendChild(tokenField);

// 其他字段同理添加后提交
document.body.appendChild(form);
form.submit();

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