浏览器扩展开发：如何构造与网站一致的Request Payload？

嘿，我太懂第一次接触Request Payload时的懵圈感了——毕竟和之前用惯的form data玩法完全不一样！别慌，咱们一步步拆解，帮你构造出和网站完全一致的请求体。

先搞懂Request Payload到底是什么 #

和form data那种键值对形式的请求体不同，Request Payload通常是JSON格式的字符串（当然也有其他格式，但90%以上场景是JSON），而且请求头里必须带上Content-Type: application/json，服务器才会正确解析它。而form data对应的Content-Type一般是application/x-www-form-urlencoded或者multipart/form-data，这是核心差异。

第一步：扒出网站的请求细节 #

首先打开浏览器开发者工具（按F12），找到目标网站发起的那个请求，重点看这两个地方：

• 请求头：确认Content-Type是不是application/json，同时把其他必要的请求头（比如Cookie、Authorization、Referer、自定义的token头）都记下来，这些是请求不被拦截的关键。
• Request Payload：复制下它的完整结构，比如网站发送的是这样的：

{
  "taskId": "abc123",
  "operation": "complete",
  "options": {
    "notify": true,
    "priority": "high"
  }
}

要确保你构造的Payload和这个结构完全匹配，包括字段名、数据类型（比如taskId是字符串就别传数字，notify是布尔值就别传字符串"true"）。

第二步：在你的扩展里构造并发送请求 #

这里用最常用的fetch和XMLHttpRequest分别给你举例子：

用fetch实现 #

// 先复刻网站的Payload结构
const requestPayload = {
  taskId: "abc123",
  operation: "complete",
  options: {
    notify: true,
    priority: "high"
  }
};

// 发送请求
fetch('https://目标网站的接口地址', {
  method: 'POST', // 注意和网站的请求方法一致，可能是PUT/DELETE等
  headers: {
    'Content-Type': 'application/json', // 这个绝对不能忘！
    'Cookie': document.cookie, // 如果需要登录态，带上当前页面的Cookie
    'Referer': window.location.href, // 有些网站会校验来源
    'User-Agent': navigator.userAgent // 模拟浏览器的UA
    // 把你从开发者工具里看到的其他必要请求头都加上
  },
  body: JSON.stringify(requestPayload) // 把JSON对象转成字符串，这就是最终的Request Payload
})
.then(response => {
  if (!response.ok) throw new Error(`请求失败：${response.status}`);
  return response.json();
})
.then(data => console.log('请求成功返回:', data))
.catch(err => console.error('请求出错:', err));

用XMLHttpRequest实现 #

如果你的扩展需要兼容旧环境，也可以用XHR：

const requestPayload = {
  taskId: "abc123",
  operation: "complete",
  options: {
    notify: true,
    priority: "high"
  }
};

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://目标网站的接口地址');

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Cookie', document.cookie);
xhr.setRequestHeader('Referer', window.location.href);
// 其他必要头信息

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log('请求成功:', data);
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('网络请求出错');
};

// 发送Payload，必须转成字符串
xhr.send(JSON.stringify(requestPayload));

常见坑点排查 #

如果你发送请求后Payload还是和网站不一致，检查这几点：

1. 是不是没调用JSON.stringify()？直接传JS对象的话，会被转成[object Object]，完全不符合要求。
2. 请求头的Content-Type是不是设对了？如果写成form data的类型，服务器会把你的JSON字符串当成键值对解析，肯定出错。
3. 字段名或数据类型是不是和网站的Payload不匹配？比如网站用task_id你写成taskId，或者网站传数字你传字符串，都会导致请求不被正确处理。
4. 是不是漏加了网站要求的请求头？比如有些网站会校验X-CSRF-Token，没加的话直接被拦截。

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