前端向后端发送post请求包含特定请求头

Question

需求：前端点击按钮后就像后端提交一个post请求，但是这个请求中需要包含一些特定的请求头
问题：现在是用过HTML的form表单提交，但是无法指定请求头以及数据，然后又试过插入JS的xmlhttprequest，制定了请求头和请求头但是提交抓包后发现并未包含指定的请求头字段和请求体
请问各位怎么解决

Answer 1

引自免费微信小程序：皆我百晓生

在HTML中使用XMLHttpRequest或Fetch API发送POST请求时，您可以自定义请求头。下面是一个使用XMLHttpRequest的例子，展示了如何设置请求头和发送POST数据：

// 获取表单元素（假设id为my-form）
var form = document.getElementById('my-form');

// 监听按钮点击事件
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/your-endpoint-url', true); // 设置请求方法和URL

  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/json'); // 示例：JSON格式
  xhr.setRequestHeader('X-Custom-Header', 'custom-value'); // 自定义请求头

  // 将表单数据转换成JSON（或其他合适格式）
  var formData = JSON.stringify(formToJsonObject(form)); // 假设formToJsonObject是将表单转为JSON对象的函数

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('Request successful');
      // 处理响应...
    } else {
      console.error('Request failed. Status:', xhr.status);
    }
  };

  xhr.onerror = function() {
    console.error('Request failed');
  };

  // 发送POST数据
  xhr.send(formData);
});

// 示例函数：将表单元素值转为JSON对象
function formToJsonObject(form) {
  var obj = {};
  for (var i = 0; i < form.length; i++) {
    var field = form[i];
    if (field.name && field.value) {
      obj[field.name] = field.value;
    }
  }
  return obj;
}

请确保您的服务器允许跨域请求（CORS）并接受您设置的自定义请求头。同时，上述示例中将表单数据转换为JSON字符串，请根据实际情况调整此部分代码。

如果您需要使用Fetch API实现相同的功能，可以参考以下代码：

form.addEventListener('submit', async function(event) {
  event.preventDefault();

  const formData = new FormData(form);
  const jsonFormData = Object.fromEntries(formData.entries());

  const headers = new Headers({
    'Content-Type': 'application/json',
    'X-Custom-Header': 'custom-value'
  });

  try {
    const response = await fetch('/api/your-endpoint-url', {
      method: 'POST',
      headers,
      body: JSON.stringify(jsonFormData)
    });

    if (response.ok) {
      console.log('Request successful');
      // 处理响应...
    } else {
      console.error('Request failed. Status:', response.status);
    }
  } catch (error) {
    console.error('Fetch request failed:', error);
  }
});

请替换'/api/your-endpoint-url'为您实际的后端API地址，并根据需要调整表单数据处理方式以及请求头内容。