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

Question

我想在正在开发的Web应用程序中测试一些URL。为此，我想手动创建HTTP POST请求（这意味着我可以添加任何参数）。

Chrome和/或Firefox是否有我错过的功能？

- Pascal Klein

---

在Chrome控制台中进行AJAX调用。无需扩展程序。这是一种很好的方法，可以在不需要获取身份验证cookie的情况下进行POST请求。 $.post('/resource/path/') - FearlessFuture

需要添加一个插件，但纠结于关闭这一点是无意义的。他想在Chrome或Firefox中获得功能，或者是否需要一个插件。它可能需要指定或未指定的插件并不重要。 - Shayne

这篇帖子被错误地关闭了。它并没有要求一个工具，而是要求在作者已经使用的工具中实现某个功能。这样一来，我们就不得不关闭所有关于如何在某个工具上做这个或那个的问题——这将占据 Stack Overflow 十分之一的内容。 - Gangnus

当你打开 Firefox 的 网络选项卡 并选择一个随机请求时，我注意到了这个功能：你可以编辑并重新发送它，这非常酷。 - jurl

现代浏览器中，您可以利用Fetch API来轻松进行JavaScript开发控制台中的POST请求。我更喜欢使用它，因为您不需要安装第三方扩展程序，特别是在发布敏感数据（例如密码）时，建议不要依赖外部软件。这是一个代码片段，演示如何使用Fetch API: https://gist.github.com/bennyn/ed95ed9edd6ce0d04e7c8d6e6eb1a1f8 - Benny Code

Answer 1

我正在制作一款名为Postman的Chrome应用程序，用于这种类型的事情。所有其他扩展似乎有点过时，所以我自己做了一个。它还具有一堆其他功能，对我们在此处记录API非常有帮助。

---

现在，原生应用程序（即独立应用程序）已经适用于Windows、Mac和Linux了！使用原生应用程序更加可取，详情请阅读这里。

---

- Abhinav

---

如果您想要使用浏览器的cookie和session，请确保安装Postman拦截器插件。 - GP cyborg

工具可能很有用，但第三方应用不能回答这个问题，该问题要求通过Chrome或Firefox完成。 - Gloweye

不幸的是，当Postman应用程序处于闲置状态时，它会使用大量RAM。如果你只需要一个轻量级的应用程序来发送基本的HTTP请求和一些身份验证信息，这就有点遗憾了。不过，这是一个功能良好且易于操作的优秀应用程序。 - Netsab612

等等……这篇帖子是神圣的。 - Shahriar

我们所知道的是，Postman诞生了。 - akr_

Answer 2

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

- Arno 2501

---

即使这个答案回答得不对问题，我还是会为它点赞：因为那正是我所需要知道的。 - Jim Pivarski

它不适合整个目的，因为它无法附加已在浏览器中设置的cookie。例如，您可能希望手动登录网站，然后发送POST请求。使用curl，如果登录过程是通过JavaScript处理的话，这将是一个巨大的痛苦。 - Vic Seedoubleyew

这对我不起作用，在OSX上我无法在zsh和bash中使用单引号，shell会变为 quote> 模式。我需要使用 -d "{\"..。 - Daniel W.

是的，curl非常棒，你几乎总是已经在Unix上拥有它，并且对于Windows来说它非常轻量级。无需注册或短信！;) - RAM237

Windows的cmd.exe也不支持单引号，所以我在我的POST请求中使用了以下命令：curl -i -X POST -H "Content-Type: application/json" -d "{"name": "New item", "year": 2009}" http://localhost:60524/ - C.M.

我推荐使用 httpie 作为“类似于curl但更好”的工具（但与Postman不同，仍然是CLI基础）。编辑：哎呀，这是一个单独的答案。 - Mike B

Answer 3

Firefox

按下 Ctrl+Shift+E 或者 Menubar -> 工具 -> Web Developer -> Network 以打开开发者工具中的网络面板。选择与请求对应的行。

更新版本

在最右侧寻找重新发送按钮。然后将会在左侧打开一个新的编辑表单。进行编辑.

旧版本

然后点击顶部右侧的小门图标（在屏幕截图的展开形式中，您会在突出显示的 Headers 左侧找到它），第二行（如果您找不到它，请重新加载页面）-> 编辑和重新发送所需的请求。

- 0fnt

---

这个功能对其他人出现了问题吗？在“查询字符串”框中编辑参数时，更改单个字符后，它拒绝进一步修改请求。此后唯一的方法是编辑整个URL/请求（因为它们都混在一起，所以很难）。 - Coldblackice

这在当前版本的Chrome中不起作用。 - Dima Lituiev

@dima-lituiev，上面的截图是针对Firefox浏览器的，我已经确认它在Firefox 88.0.1版本中可以正常工作。 - youcantexplainthat

我还确认它在Firefox 88.0.1上可以使用。但是在我的情况下，“编辑和重新发送”按钮没有显示出来。我必须右键点击请求，然后点击“在网络面板中打开”。从那里，我能够点击右上角的“重新发送”下拉菜单并选择“编辑和重新发送”。赞扬这个解决方案多年来仍然有效。甚至还有一个选项可以创建一个fetch()命令供控制台使用，就像OP最初请求的那样。 - Jeff82

在最新版本的Firefox中，只有“重新发送”按钮，没有“编辑和重新发送”按钮！！我花了5分钟才弄清楚没有其他按钮可以编辑它。 - Ambuj Mani Tripathi

Answer 4

放弃浏览器，试一试 CLI。 HTTPie 是一个很棒的工具！

CLI HTTP 客户端：

• HTTPie
• Curlie
• HTTP Prompt
• Curl
• wget

如果您坚持要使用浏览器扩展程序，则可以尝试以下选项：

Chrome：

• Postman - REST Client（已停用，现在有一个桌面程序）
• Advanced REST client
• Talend API Tester - Free Edition

Firefox：

• RESTClient

- amra

---

还有资源测试插件 https://addons.mozilla.org/zh-CN/firefox/addon/http-resource-test/ - akostadinov

海报最后更新于2011年6月28日 - Firefox的更新意味着没有办法启动它。 - Richard

@akostadinov 我无法在Mozilla中使用资源测试插件，即使我已经安装并重启了最新版本的Firefox，在开发者工具下也没有出现该工具。 - Ram

刚试了一下REST Easy，当场卸载了：它的界面过于繁琐，强制用户按照固定的用例进行操作。对于API开发来说不是很好。 - 7heo.tk

我宁愿使用curlie而不是HTTPie。curlie基于更强大的curl。 - Diti

Answer 5

在受到Chrome浏览器的Postman极大启发后，我决定为Firefox编写类似的工具。

REST Easy*是一个无需重启的Firefox插件，旨在尽可能提供请求的控制。该插件目前仍处于实验状态（甚至还未经过Mozilla审核），但开发进展顺利。

该项目是开源的，因此如果有人有兴趣帮助开发，那将非常棒：https://github.com/nathan-osman/Rest-Easy

_{*从http://addons.mozilla.org获取的插件将永远落后于GitHub上提供的代码}

- Nathan Osman

---

看起来不错，但缺乏完全控制请求正文的能力。目前，它提供键/值功能，但希望能完全控制POST正文。 - galmok

@NathanOsman，那现在是一个功能还是仍然是计划中的功能？ - Pacerier

@Pacerier：这是我目前正在开发的一个功能，已经完成了大约90%。希望能在年底之前发布。似乎Mozilla批准插件存在一些积压。 - Nathan Osman

经过一个月的等待，新版本已获批准。PUT和DELETE支持已经到位！在这一个月里，我还进行了大量其他的改动，很快将在下一个发布版本中展现出来。（希望这次能更早地通过审批。） - Nathan Osman

似乎这个已经不再可用了，可能不是一个 WebExtension，因此不兼容 Firefox >= 57。这个问题可以在此处追踪：https://github.com/nathan-osman/REST-Easy/issues/78 - rugk

Answer 6

你明确要求提供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 操作。

- dumbledad

---

我想补充一点，对于不知道的人：你所指定的 action 是你想要获取的资源（可能包括 GET 风格的查询参数），而 value 指定了 POST 请求的数据主体。例如 action="api/ids?name=John" 和 value="hello" 将会向 <hostname>/api/ids?name=John 发送一个带有主体为 hello 的 POST 请求。 - Michele Piccolini

Answer 7

我认为关于Fetch API的OP问题中，Benny Neugebauer的评论应该作为答案呈现在这里，因为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控制台上也可以随时使用。

按下F12键，输入命令并在控制台选项卡中执行（或按上箭头键如果您之前用过），然后按Enter键，看到它正在等待和返回响应，这正是它在简单POST请求测试方面非常有用的地方。

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

- ShayD

---

这个方法非常有效，可以在应用程序陷入糟糕状态且由于错误导致UI被锁定无法清除时，帮助用户“解困”。在修复错误之前，让用户继续使用应用程序。 - Steve In CO

就像@SteveInCO一样，我需要一个“本机Chrome”方法来解决紧急情况下无法使用除Chrome之外的任何其他工具的用户问题（尽管我自己在日常使用中使用大多数其他工具）。 - user3067860

Answer 8

这里是Chrome浏览器的高级REST客户端扩展程序。 对我来说工作得很好 - 请记住您仍然可以使用调试器。 网络面板特别有用;它将提供渲染的JSON对象和错误页面。

- Nate

Answer 9

对于 Firefox，还有一个名为 RESTClient 的扩展程序非常不错：

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

- Johan Falk

Answer 10

可能与浏览器无直接关系，但 Fiddler 是另一款不错的软件。

- Vineel