How to manually send HTTP POST requests from Firefox or Chrome browser

Ajax Google Chrome Firefox Browser Http Post

Ajax Problem Overview

I want to test some URLs in a web application I'm working on. For that I would like to manually create HTTP POST requests (meaning I can add whatever parameters I like).

Is there any functionality in Chrome and/or Firefox that I'm missing?

Ajax Solutions

Solution 1 - Ajax

I have been making a Chrome app called Postman for this type of stuff. All the other extensions seemed a bit dated so made my own. It also has a bunch of other features which have been helpful for documenting our own API here.

Postman now also has native apps (i.e. standalone) for Windows, Mac and Linux! It is more preferable now to use native apps, read more here.

Solution 2 - Ajax

CURL is awesome to do what you want! It's a simple, but effective, command line tool.

REST implementation test commands:

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

Solution 3 - Ajax

Firefox

Open Network panel in Developer Tools by pressing Ctrl+Shift+E or by going Menubar -> Tools -> Web Developer -> Network. Then Click on small door icon on top-right (in expanded form in the screenshot, you'll find it just left of the highlighted Headers), second row (if you don't see it then reload the page) -> Edit and resend whatever request you want

Solution 4 - Ajax

Forget the browser and try CLI. HTTPie is a great tool!

CLI HTTP clients:

If you insist on a browser extension then:

Chrome:

Postman - REST Client (deprecated, now has a desktop program)
Advanced REST client
Talend API Tester - Free Edition

Firefox:

RESTClient

Solution 5 - Ajax

Having been greatly inspired by Postman for Chrome, I decided to write something similar for Firefox.

REST Easy* is a restartless Firefox add-on that aims to provide as much control as possible over requests. The add-on is still in an experimental state ~~(it hasn't even been reviewed by Mozilla yet)~~ but development is progressing nicely.

The project is open source, so if anyone feels compelled to help with development, that would be awesome: https://github.com/nathan-osman/Rest-Easy

_{* the add-on available from http://addons.mozilla.org will always be slightly behind the code available on GitHub}

Solution 6 - Ajax

You specifically asked for "extension or functionality in Chrome and/or Firefox", which the answers you have already received provide, but I do like the simplicity of oezi's answer to the closed question "How can I send a POST request with a web browser?" for simple parameters. oezi says:

With a form, just set method to "post"

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

I.e., build yourself a very simple page to test the POST actions.

Solution 7 - Ajax

Here's the Advanced REST Client extension for Chrome.

It works great for me -- do remember that you can still use the debugger with it. The Network pane is particularly useful; it'll give you rendered JSON objects and error pages.

Solution 8 - Ajax

For Firefox there is also an extension called RESTClient which is quite nice:

RESTClient, a debugger for RESTful web services

Solution 9 - Ajax

I think that Benny Neugebauer's comment on the OP question about the Fetch API should be presented here as an answer since the OP was looking for a functionality in Chrome to manually create HTTP POST requests and that is exactly what the fetch command does.

There is a nice simple example of the Fetch API here:

// 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))

Some of the advantages of the fetch command are really precious: It's simple, short, fast, available and even as a console command it stored on your chrome console and can be used later.

The simplicity of pressing F12, write the command in the console tab (or press the up key if you used it before) then press Enter, see it pending and returning the response is what making it really useful for simple POST requests tests.

Of course, the main disadvantage here is that, unlike Postman, this won't pass the cross-origin-policy, but still I find it very useful for testing in local environment or other environments where I can enable CORS manually.

Solution 10 - Ajax

It may not be directly related to browsers, but Fiddler is another good software.

Solution 11 - Ajax

You could also use Watir or WatiN to automate browsers. Watir is written for Ruby and Watin is for .NET languages. I am not sure if it's what you are looking for, though.

Solution 12 - Ajax

There have been some other clients born since the rise of Postman that is worth mentioning here:

Insomnia: with both desktop application and Chrome plugin
Hoppscotch: previously known as Postwoman, and with a Chrome plugin available as well. You can also make it work locally with docker if you want to get funny
Paw: if you are on Mac
Advanced Rest Client: already mentioned as a Chrome plugin, but it is worth pointing out that it also has a desktop application
soapUI: written in Java and with lots of testing functionality
Boomerang: yet another way to test APIs. It comes with SOAP integration and it also has a Chrome plugin available
Thunder Client: if you use VS Code as your text editor then you should go and check out this awesome extension

Solution 13 - Ajax

Try Runscope. A free tool sampling their service is provided at https://www.hurl.it/.

You can set the method, authentication, headers, parameters, and body. The response shows status code, headers, and body. The response body can be formatted from JSON with a collapsable hierarchy.

Paid accounts can automate test API calls and use return data to build new test calls.

COI disclosure: I have no relationship to Runscope.

Solution 14 - Ajax

Check out http-tool for Firefox...

> Aimed at web developers who need to debug HTTP requests and responses. Can be extremely useful while developing REST based API.

> Features: > * GET > * HEAD > * POST > * PUT > * DELETE > > Add header(s) to request.
> Add body content to request. > > View header(s) in response.
> View body content in response.
> View status code of response.
> View status text of response.

Solution 15 - Ajax

You can post requests directly from the browser with ReqBin. No plugin or desktop application is required.

Solution 16 - Ajax

I tried to use postman app, had some auth issues. If you have to do it exclusively using browser, go to network tab, right click on the call, say edit and send response. There is a similar ans on here about Firefox, this right click worked for me on edge and pretty sure it would work for chrome too

Solution 17 - Ajax

So it occurs to me that you can use the console, create a function, and just easily send requests from the console, which will have the correct cookies, etc.

so I just grabbed this from here: 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
}

IF YOU WANT TO MAKE GET REQUESTS, you can just put them in your browser address bar!

if you paste that into your console, then you can make POST requests by repeatedly calling your function like this:

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

and the server output will be printed in the console (as well as all the data available in the network tab)

This function assumes you are sending JSON data. If you are not, you will need to change it to suite your needs

Content Type	Original Author	Original Content on Stackoverflow
Question	Pascal Klein	View Question on Stackoverflow
Solution 1 - Ajax	Abhinav	View Answer on Stackoverflow
Solution 2 - Ajax	Arno 2501	View Answer on Stackoverflow
Solution 3 - Ajax	0fnt	View Answer on Stackoverflow
Solution 4 - Ajax	amra	View Answer on Stackoverflow
Solution 5 - Ajax	Nathan Osman	View Answer on Stackoverflow
Solution 6 - Ajax	dumbledad	View Answer on Stackoverflow
Solution 7 - Ajax	Nate	View Answer on Stackoverflow
Solution 8 - Ajax	Johan Falk	View Answer on Stackoverflow
Solution 9 - Ajax	ShayD	View Answer on Stackoverflow
Solution 10 - Ajax	Vineel	View Answer on Stackoverflow
Solution 11 - Ajax	Ceres	View Answer on Stackoverflow
Solution 12 - Ajax	AnhellO	View Answer on Stackoverflow
Solution 13 - Ajax	Bennett Brown	View Answer on Stackoverflow
Solution 14 - Ajax	bobbyrne01	View Answer on Stackoverflow
Solution 15 - Ajax	Khachatur	View Answer on Stackoverflow
Solution 16 - Ajax	Niraj Motiani	View Answer on Stackoverflow
Solution 17 - Ajax	Jay Day Zee	View Answer on Stackoverflow