如何从 Firefox 或 Chrome 浏览器手动发送 HTTP POST 请求

您还可以使用 Watir 或 WatiN 来自动化浏览器。Watir 是为 Ruby 编写的，而 Watin 是为 .NET 语言编写的。不过，我不确定这是否是您要找的。

• http://watin.sourceforge.net/
• http://watir.com/

下面是适用于 Chrome 的高级 REST 客户端扩展。

它对我来说效果很好 - 请记住，您仍然可以使用它的调试器。“网络”窗格特别有用;它将为您提供呈现的 JSON 对象和错误页面。

忘记浏览器并尝试 CLI。HTTPie是一个很棒的工具！

CLI HTTP 客户端：

• HTTPie的
• 卷曲
• HTTP 提示符
• 卷曲
• wget的

如果您坚持使用浏览器扩展程序，则：

铬：

• Postman - REST 客户端（已弃用，现在有一个桌面程序)
• 高级 REST 客户端
• Talend API Tester - 免费版

火狐浏览器：

• RESTClient

我一直在为这类东西制作一个名为 Postman 的 Chrome 应用程序。所有其他扩展似乎都有点过时，所以做了我自己的。它还具有许多其他功能，这些功能有助于在此处记录我们自己的 API。

---

Postman 现在还拥有适用于 Windows、Mac 和 Linux 的原生应用程序（即独立应用程序）！现在更可取的是使用本机应用程序，请在此处阅读更多内容。

---

对于Firefox，还有一个名为RESTClient的扩展，它非常好：

RESTClient，用于 RESTful Web 服务的调试器

CURL 很棒，可以做你想做的事！这是一个简单但有效的命令行工具。

REST实现测试命令：

curl -i -X GET http://rest-api.io/items
curl -i -X GET http://rest-api.io/items/5069b47aa892630aae059584
curl -i -X DELETE http://rest-api.io/items/5069b47aa892630aae059584
curl -i -X POST -H 'Content-Type: application/json' -d '{"name": "New item", "year": "2009"}' http://rest-api.io/items
curl -i -X PUT -H 'Content-Type: application/json' -d '{"name": "Updated item", "year": "2010"}' http://rest-api.io/items/5069b47aa892630aae059584

在受到 Postman for Chrome 的启发后，我决定为 Firefox 编写类似的东西。

REST Easy* 是一个无需重启的 Firefox 插件，旨在提供对请求的尽可能多的控制。该插件仍处于实验状态（Mozilla甚至还没有对其进行审查），但开发进展顺利。

这个项目是开源的，所以如果有人觉得有必要帮助开发，那就太棒了：https://github.com/nathan-osman/Rest-Easy

_{* http://addons.mozilla.org 提供的附加组件将始终略微落后于 GitHub 上提供的代码}

查看 Firefox 的 http-tool...

面向需要调试 HTTP 请求和响应的 Web 开发人员。 在开发基于 REST 的 API 时非常有用。

特征：

• 获取
• 头
• 发布
• 放
• 删除

将标头添加到请求。
将正文内容添加到请求中。

查看响应中的标题。
查看正文内容作为响应。
查看响应的状态码。
查看响应的状态文本。

火狐浏览器

在“开发人员工具”中打开“网络”面板，方法是按 或转到“菜单栏”-“>工具”->“Web 开发人员”-“>网络”。选择与请求对应的行。Ctrl+Shift+E

较新的版本

在最右侧查找重新发送按钮。然后，一个新的编辑表单将在左侧打开。编辑它。

旧版本

然后单击右上角的小门图标（在屏幕截图中以展开形式显示，您会在突出显示的标题的左侧找到它），第二行（如果您没有看到它，请重新加载页面）->编辑并重新发送您想要的任何请求

您特别要求“Chrome 和/或 Firefox 中的扩展或功能”，您已经收到的答案提供了这些内容，但我确实喜欢 oezi 对封闭问题“如何使用 Web 浏览器发送 POST 请求”的简单回答，以获得简单的参数。oezi 说道：

使用表单，只需将method"post"

<form action="blah.php" method="post">
  <input type="text" name="data" value="mydata" />
  <input type="submit" />
</form>

也就是说，为自己构建一个非常简单的页面来测试 POST 操作。

试试 Runscope。https://www.hurl.it/ 提供免费的工具样品服务。

您可以设置方法、身份验证、标头、参数和正文。响应显示状态代码、标头和正文。响应正文可以从具有可折叠层次结构的 JSON 格式化。

付费帐户可以自动执行测试 API 调用，并使用返回数据来构建新的测试调用。

COI 披露：我与 Runscope 没有任何关系。

它可能与浏览器没有直接关系，但 Fiddler 是另一个不错的软件。

您可以使用 ReqBin 直接从浏览器发布请求。 不需要插件或桌面应用程序。

自 Postman 兴起以来，还有其他一些客户诞生，这里值得一提：

• 失眠：使用桌面应用程序和 Chrome 插件
• Hoppscotch：以前称为 Postwoman，也提供 Chrome 插件。如果你想搞笑，你也可以让它在本地使用 docker
• Paw：如果您在 Mac 上
• 高级 Rest 客户端：已经提到是 Chrome 插件，但值得指出的是，它还有一个桌面应用程序
• soapUI：用 Java 编写，具有许多测试功能
• 回旋镖：测试 API 的另一种方法。它带有SOAP集成，并且还具有可用的Chrome插件
• Thunder Client：如果您使用 VS Code 作为文本编辑器，那么您应该去看看这个很棒的扩展

我认为 Benny Neugebauer 对 OP 关于 Fetch API 的问题的评论应该在这里作为答案呈现，因为 OP 正在寻找 Chrome 中手动创建 HTTP POST 请求的功能，而这正是 fetch 命令的作用。

这里有一个很好的 Fetch API 简单示例：

// Make sure you run it from the domain 'https://jsonplaceholder.typicode.com/'. (cross-origin-policy)
fetch('https://jsonplaceholder.typicode.com/posts',{method: 'POST', headers: {'test': 'TestPost'} })
  .then(response => response.json())
  .then(json => console.log(json))

fetch 命令的一些优点非常宝贵： 它简单、简短、快速、可用，甚至可以作为控制台命令存储在您的 chrome 控制台上，以后可以使用。

按 ，在控制台选项卡中编写命令（如果您以前使用过，则按向上键），然后按 ，查看它处于待处理状态并返回响应，这使其对简单的 POST 请求测试非常有用。F12Enter

当然，这里的主要缺点是，与 Postman 不同，它不会通过跨源策略，但我仍然发现它对于在本地环境或其他可以手动启用 CORS 的环境中进行测试非常有用。

我尝试使用邮递员应用程序，遇到了一些身份验证问题。 如果您必须仅使用浏览器执行此操作，请转到网络选项卡，右键单击通话，说编辑并发送响应。这里有一个关于 Firefox 的类似 ans，这个右键单击对我有用，并且非常确定它也适用于 chrome

因此，在我看来，您可以使用控制台，创建一个函数，然后轻松地从控制台发送请求，该控制台将具有正确的cookie等。

所以我只是从这里抓住了这个：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options

// Example POST method implementation:
async function postData(url = '', data = {}, options = {}) {
  // Default options are marked with *
let defaultOptions = {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  }

// update the default options with specific options (e.g. { "method": "GET" } )
const requestParams = Object.assign(defaultOptions, options);

const response = await fetch(url, requestParams);
  return response.text(); // displays the simplest form of the output in the console. Maybe changed to response.json() if you wish
}

如果你想发出 GET 请求，你可以把它们放在你的浏览器地址栏中！

如果将其粘贴到控制台中，则可以通过重复调用函数来发出 POST 请求，如下所示：

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // you might want to use JSON.parse on this
  });

服务器输出将打印在控制台中（以及“网络”选项卡中提供的所有数据）

此函数假定您正在发送 JSON 数据。如果不是，则需要对其进行更改以满足您的需求

Windows CLI 解决方案

在 PowerShell 中，可以使用 Invoke-WebRequest。示例语法：

Invoke-WebRequest -Uri http://localhost:3000 -Method POST -Body @{ username='clever_name', password='hunter2' } -UseBasicParsing

在没有 Internet Explorer 的系统上，需要该标志。-UseBasicParsing

这个问题现在已经有 12 年了，很容易理解为什么作者当时要求 Firefox 或 Chrome 的解决方案。不过，12年后，还有其他浏览器，不涉及任何附加组件或其他工具的最佳浏览器是Microsoft Edge。

只需打开 devtools （F12），然后打开“网络控制台”选项卡（而不是“网络”或“控制台”选项卡，单击“+”号并将其打开（如果不可见）。

这是官方指南：https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool

玩得愉快！