XMLHttpRequest发送请求仅携带元数据无提交数据如何解决

问题原因 #

你明确需求是发送表单数据，但当前代码设置了application/json的请求头，发送的是JSON序列化后的纯字符串，和表单数据的格式完全不匹配，服务端或webhook的可视化面板按表单规则解析时自然识别不到对应内容。如果确实需要发送JSON格式数据，当前写法本身是合法的，你可以在webhook的原始请求（Raw）栏看到发送的字符串，可视化面板没展示是因为纯字符串类型的JSON载荷没有匹配的字段名，不会被自动解析到结构化面板中。

调整方案 #

方案1：按需求发送表单数据 #

普通表单场景

修改请求头为表单对应类型，按参数名=参数值的格式传入内容即可：

var mc_xhr = new XMLHttpRequest();
mc_xhr.open(
  "POST",
  "https://webhook.site/58493d5a-9b8d-4300-875b-8f4d5ec6665b"
);
mc_xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 可自行修改参数名，多参数用&拼接，例如：content=test-string&type=demo
mc_xhr.send("content=test-string");

带文件的复杂表单场景

直接用FormData对象处理，不需要手动设置Content-Type，浏览器会自动补充正确的请求头：

var mc_xhr = new XMLHttpRequest();
mc_xhr.open(
  "POST",
  "https://webhook.site/58493d5a-9b8d-4300-875b-8f4d5ec6665b"
);
var form = new FormData();
form.append("content", "test-string");
// 有其他参数或文件继续调用append方法添加即可
mc_xhr.send(form);

方案2：发送JSON格式数据 #

将字符串放到JSON对象中，避免纯字符串被服务端过滤或无法被结构化解析：

var mc_xhr = new XMLHttpRequest();
mc_xhr.open(
  "POST",
  "https://webhook.site/58493d5a-9b8d-4300-875b-8f4d5ec6665b"
);
mc_xhr.setRequestHeader("Content-Type", "application/json");
mc_xhr.send(JSON.stringify({content: "test-string"}));

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