从Firefox或Chrome浏览器手动发送HTTP POST请求的方法

技术背景

在前端开发过程中，我们经常需要手动发送HTTP POST请求来测试API或者与后端进行交互。虽然有很多专业的工具可以完成这个任务，但有时候我们希望直接在浏览器中进行操作。Firefox和Chrome是两款常用的浏览器，它们都提供了一些功能和扩展来满足这个需求。

实现步骤

使用浏览器自带功能

Firefox

打开开发者工具中的网络面板，可以通过按下 Ctrl + Shift + E 或者通过菜单栏 Tools -> Web Developer -> Network 打开。
选择一个请求对应的行。
- 新版本：在最右侧找到重新发送按钮，然后左侧会打开一个新的编辑表单，编辑后即可重新发送。
- 旧版本：点击右上角的小门图标（如果看不到则重新加载页面），然后编辑并重新发送你想要的请求。

Chrome

可以使用浏览器控制台中的 fetch API 来发送POST请求。示例代码如下：

fetch("https://example.com/api/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "john", id: 2 })
})
.then(res => res.json())
.then(data => console.log(data));

使用浏览器扩展

Postman

Chrome应用：可以在Chrome应用商店安装 Postman 来发送HTTP请求。
原生应用：Postman现在也有适用于Windows、Mac和Linux的原生应用。

其他扩展

Firefox：有 RESTClient 等扩展。
Chrome：有 Advanced REST Client 等扩展。

使用命令行工具

CURL

CURL是一个简单而有效的命令行工具，可以用来发送HTTP请求。示例命令如下：

1	`curl -i -X POST -H 'Content-Type: application/json' -d '{"name": "New item", "year": "2009"}' http://rest-api.io/items`

HTTPie

HTTPie 也是一个不错的命令行工具，使用起来更加方便。

核心代码

使用JavaScript的fetch API发送POST请求

async function postData(url = '', data = {}, options = {}) {
  let defaultOptions = {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
    body: JSON.stringify(data)
  }

  const requestParams = Object.assign(defaultOptions, options);

  const response = await fetch(url, requestParams);
  return response.text();
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data);
  });