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

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

Chrome和/或Firefox中是否有我缺少的功能？

1791818 次浏览
小开

您还可以使用Watir或WatiN来自动化浏览器。Watir是为Ruby编写的，Wtin是为. NET语言编写的。不过，我不确定它是否是您正在寻找的。

小开

这是Chrome的高级REST客户端扩展名。

它对我来说非常有用——请记住，您仍然可以使用调试器。网络窗格特别有用；它会为您提供呈现的JSON对象和错误页面。

小开

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

HTTPie截图

CLI HTTP客户端：

如果您坚持使用浏览器扩展，那么：

Chrome：

Firefox：

小开
最佳答案

我一直在为这种类型的东西制作一个名为邮递员的Chrome应用程序。所有其他扩展似乎都有点过时了，所以我自己做了。它还有一系列其他功能，这些功能有助于在这里记录我们自己的API。

Postman现在也有原生应用程序（即独立）适用于Windows、Mac和Linux！现在使用原生应用程序更可取，阅读更多这里。

小开

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

RESTClient，RESTful Web服务的调试器

小开

CURL是厉害做你想做的！这是一个简单但有效的命令行工具。

REST实现测试命令：

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

受到邮递员Chrome的启发，我决定为Firefox写一些类似的东西。

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

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

*可从获取的附加组件http://addons.mozilla.org

小开

查看超文本传输协议-Tools for Firefox…

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

产品特点：

  • get
  • HEAD
  • POST
  • 把
  • 删除

向请求添加标头。
向请求添加正文内容。

查看响应中的标头。
查看响应中的正文内容。
查看响应的状态代码。
查看响应的状态文本。

小开

Firefox

按Ctrl+Shift+E或转到菜单栏->工具->Web开发人员->网络，打开开发人员工具中的网络面板。然后单击右上角的小门图标（在屏幕截图中以展开的形式，您会发现它就在突出显示的标题的左侧），第二行（如果您看不到它，请重新加载页面）->编辑并重新发送您想要的任何请求

Firefox开发工具与按钮

POST请求正文高亮显示

小开

你特别要求“Chrome和/或Firefox中的扩展或功能”，你已经收到的答案提供了，但我确实喜欢Oezi对封闭问题“如何使用Web浏览器发送POST请求？”的简单参数。

对于表单，只需将method设置为"post"

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

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

小开

尝试运行范围。https://www.hurl.it/提供了一个免费的工具来采样他们的服务。

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

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

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

小开

它可能与浏览器没有直接关系，但小提琴手是另一个很好的软件。

Fiddler web调试器

小开

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

小开

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

小开

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

有一个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))

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

按下F12，在控制台选项卡中写入命令（如果您之前使用过，请按向上键），然后按输入，看到它挂起并返回响应的简单性使其对简单的POST请求测试真正有用。

当然，这里的主要缺点是，与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-origincache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cachedcredentials: 'same-origin', // include, *same-origin, omitheaders: {'Content-Type': 'application/json'// 'Content-Type': 'application/x-www-form-urlencoded',},redirect: 'follow', // manual, *follow, errorreferrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-urlbody: 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}

如果您想提出请求，您可以将它们放在浏览器地址栏中！

如果将其粘贴到控制台中，则可以通过重复调用函数来发出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中，您可以使用调用WebRequest。示例语法：

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

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


提交答案