How to send post request from browser

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

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?

18 Answers 18

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

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

REST implementation test commands:

Firefox

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

CLI HTTP clients:

If you insist on a browser extension then:

Chrome:

Firefox:

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}

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»

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

Here’s the Advanced REST Client extension for Chrome.

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:

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.

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.

Pure JavaScript Send POST Data Without a Form

13 Answers 13

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can send it and insert the data to the body:

By the way, for get request:

The Fetch API is intended to make GET requests easy, but it is able to POST as well.

If you are as lazy as me (or just prefer a shortcut/helper):

You can use the XMLHttpRequest object as follows:

Also, RESTful lets you get data back from a POST request.

JS (put in static/hello.html to serve via Python):

Python server (for testing):

Console log (chrome):

Console log (firefox):

Console log (Edge):

If you want to use XMLHttpRequest you can do the following

Or if you want to use fetch API

now you can handle the data on the server-side just like the way you deal with reugular HTML Forms.

Additional Info

It is advised that you must not set Content-Type header when sending FormData since the browser will take care of that.

Did you know that JavaScript has it’s built-in methods and libs to create forms and submit them?

I am seeing a lot of replies here all asking to use a 3rd party library which I think is an overkill.

I would do the following in pure Javascript:

This way (A) you don’t need to rely on 3rd parties to do the job. (B) It’s all built-in to all browsers, (C) faster, (D) it works, feel free to try it out.

I hope this helps.

navigator.sendBeacon()

If you simply need to POST data and do not require a response from the server, the shortest solution would be to use navigator.sendBeacon() :

The most popular answers here do not show how to get data back from the POST. Also, the popular «fetch» solutions do not work in the latest version of Chrome when sending data to the latest version of NodeJS unless you pass headers and also unwrap the response.json() promise. Also, the popular answers do not use async/await.

Here is the cleanest and most complete solution I could come up with that works.

Here is a nice function you (or anyone else) could use in their code:

Sending form data

Once the form data has been validated on the client-side, it is okay to submit the form. And, since we covered validation in the previous article, we’re ready to submit! This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.

First we’ll discuss what happens to the data when a form is submitted.

Client/server architecture

At its most basic, the web uses a client/server architecture that can be summarized as follows: a client (usually a web browser) sends a request to a server (most of the time a web server like Apache, Nginx, IIS, Tomcat, etc.), using the HTTP protocol. The server answers the request using the same protocol.

An HTML form on a web page is nothing more than a convenient user-friendly way to configure an HTTP request to send data to a server. This enables the user to provide information to be delivered in the HTTP request.

Note: To get a better idea of how client-server architectures work, read our Server-side website programming first steps module.

On the client side: defining how to send the data

The action attribute

The action attribute defines where the data gets sent. Its value must be a valid relative or absolute URL. If this attribute isn’t provided, the data will be sent to the URL of the page containing the form — the current page.

In this example, the data is sent to an absolute URL — https://example.com :

Here, we use a relative URL — the data is sent to a different URL on the same origin:

When specified with no attributes, as below, the data is sent to the same page that the form is present on:

Note: It’s possible to specify a URL that uses the HTTPS (secure HTTP) protocol. When you do this, the data is encrypted along with the rest of the request, even if the form itself is hosted on an insecure page accessed using HTTP. On the other hand, if the form is hosted on a secure page but you specify an insecure HTTP URL with the action attribute, all browsers display a security warning to the user each time they try to send data because the data will not be encrypted.

The names and values of the non-file form controls are sent to the server as name=value pairs joined with ampersands. The action value should be a file on the server that can handle the incoming data, including ensuring server-side validation. The server then responds, generally handling the data and loading the URL defined by the action attribute, causing a new page load (or a refresh of the existing page, if the action points to the same page).

How the data is sent depends on the method attribute.

The method attribute

The method attribute defines how data is sent. The HTTP protocol provides several ways to perform a request; HTML form data can be transmitted via a number of different methods, the most common being the GET method and the POST method

To understand the difference between those two methods, let’s step back and examine how HTTP works. Each time you want to reach a resource on the Web, the browser sends a request to a URL. An HTTP request consists of two parts: a header that contains a set of global metadata about the browser’s capabilities, and a body that can contain information necessary for the server to process the specific request.

The GET method

The GET method is the method used by the browser to ask the server to send back a given resource: «Hey server, I want to get this resource.» In this case, the browser sends an empty body. Because the body is empty, if a form is sent using this method the data sent to the server is appended to the URL.

Consider the following form:

Since the GET method has been used, you’ll see the URL www.foo.com/?say=Hi&to=Mom appear in the browser address bar when you submit the form.

The HTTP request looks like this:

Note: You can find this example on GitHub — see get-method.html (see it live also).

The POST method

The POST method is a little different. It’s the method the browser uses to talk to the server when asking for a response that takes into account the data provided in the body of the HTTP request: «Hey server, take a look at this data and send me back an appropriate result.» If a form is sent using this method, the data is appended to the body of the HTTP request.

When the form is submitted using the POST method, you get no data appended to the URL, and the HTTP request looks like so, with the data included in the request body instead:

The Content-Length header indicates the size of the body, and the Content-Type header indicates the type of resource sent to the server. We’ll discuss these headers later on.

Note: You can find this example on GitHub — see post-method.html (see it live also).

Viewing HTTP requests

HTTP requests are never displayed to the user (if you want to see them, you need to use tools such as the Firefox Network Monitor or the Chrome Developer Tools). As an example, your form data will be shown as follows in the Chrome Network tab. After submitting the form:

You can then get the form data, as shown in the image below.

The only thing displayed to the user is the URL called. As we mentioned above, with a GET request the user will see the data in their URL bar, but with a POST request they won’t. This can be very important for two reasons:

On the server side: retrieving the data

Whichever HTTP method you choose, the server receives a string that will be parsed in order to get the data as a list of key/value pairs. The way you access this list depends on the development platform you use and on any specific frameworks you may be using with it.

Example: Raw PHP

PHP offers some global objects to access the data. Assuming you’ve used the POST method, the following example just takes the data and displays it to the user. Of course, what you do with the data is up to you. You might display it, store it into a database, send it by email, or process it in some other way.

Note: This example won’t work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are MAMP (Mac and Windows) and AMPPS (Mac, Windows, Linux).

Note also that if you are using MAMP but don’t have MAMP Pro installed (or if the MAMP Pro demo time trial has expired), you might have trouble getting it working. To get it working again, we have found that you can load up the MAMP app, then choose the menu options MAMP > Preferences > PHP, and set «Standard Version:» to «7.2.x» (x will differ depending on what version you have installed).

Example: Python

This example shows how you would use Python to do the same thing — display the submitted data on a web page. This uses the Flask framework for rendering the templates, handling the form data submission, etc. (see python-example.py).

The two templates referenced in the above code are as follows (these need to be in a subdirectory called templates in the same directory as the python-example.py file, if you try to run the example yourself):

Other languages and frameworks

It’s worth noting that even using these frameworks, working with forms isn’t necessarily easy. But it’s much easier than trying to write all the functionality yourself from scratch, and will save you a lot of time.

Note: It is beyond the scope of this article to teach you any server-side languages or frameworks. The links above will give you some help, should you wish to learn them.

A special case: sending files

Sending files with HTML forms is a special case. Files are binary data — or considered as such — whereas all other data is text data. Because HTTP is a text protocol, there are special requirements for handling binary data.

The enctype attribute

If you want to send files, you need to take three extra steps:

Note: Servers can be configured with a size limit for files and HTTP requests in order to prevent abuse.

Security issues

Each time you send data to a server, you need to consider security. HTML forms are by far the most common server attack vectors (places where attacks can occur). The problems never come from the HTML forms themselves — they come from how the server handles data.

The Website security article of our server-side learning topic discusses a number of common attacks and potential defenses against them in detail. You should go and check that article out, to get an idea of what’s possible.

Be paranoid: Never trust your users

So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

All data that comes to your server must be checked and sanitized. Always. No exception.

You should be able to avoid many/most problems if you follow these three rules, but it’s always a good idea to get a security review performed by a competent third party. Don’t assume that you’ve seen all the possible problems.

Summary

As we’d alluded to above, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. It’s possible to perform client-side form validation, but the server can’t trust this validation because it has no way to truly know what has really happened on the client-side.

If you’ve worked your way through these tutorials in order, you now know how to markup and style a form, do client-side validation, and have some idea about submitting a form.

See also

If you want to learn more about securing a web application, you can dig into these resources:

POST: sending a post request in a url itself

Now i have no clue how to send this request! Will it be something like:

or do i have to use java to send the same?

7 Answers 7

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Based on what you provided, it is pretty simple for what you need to do and you even have a number of ways to go about doing it. You’ll need something that’ll let you post a body with your request. Almost any programming language can do this as well as command line tools like cURL.

One you have your tool decided, you’ll need to create your JSON body and submit it to the server.

An example using cURL would be (all in one line, minus the \ at the end of the first line):

The above command will create a request that should look like the following:

You can post data to a url with JavaScript & Jquery something like that:

It is not possible to send POST parameters in the URL in a straightforward manner. POST request in itself means sending information in the body.

I found a fairly simple way to do this. Use Postman by Google, which allows you to specify the content-type (a header field) as application/json and then provide name-value pairs as parameters.

Just use your URL in the place of theirs.

You can use postman.

Where select Post as method. and In Request Body send JSON Object.

In windows this command does not work for me..I have tried the following command and it works..using this command I created session in couchdb sync gate way for the specific user.

Как вручную отправлять запросы HTTP POST из браузера Firefox или Chrome?

Я хочу протестировать некоторые URL-адреса в веб-приложении, над которым я работаю. Для этого я хотел бы вручную создавать запросы HTTP POST (то есть я могу добавлять любые параметры, которые мне нравятся).

Есть ли какие-либо расширения или функции в Chrome и / или Firefox, которые мне не хватает?

15 ответы

Я делаю приложение Chrome под названием Почтальон для такого рода вещей. Все остальные расширения казались немного устаревшими, поэтому я сделал свои собственные. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.

Почтальон теперь также имеет родные приложения (т.е. автономно) для Windows, Mac и Linux! Сейчас предпочтительнее использовать нативные приложения, подробнее здесь.

ответ дан 17 мар ’21, в 11:03

CURL УДИВИТЕЛЬНО делать то, что ты хочешь! Это простой, но эффективный инструмент командной строки.

Команды тестирования реализации отдыха:

ответ дан 20 дек ’18, 20:12

Firefox

Забудьте о браузере и попробуйте CLI. HTTPie отличный инструмент!

CLI http-клиенты:

Если вы настаиваете на расширении браузера, то:

Chrome:

Firefox:

ответ дан 18 мая ’21, 10:05

Будучи сильно вдохновленным Почтальон для Chrome, Решил написать что-то подобное для Firefox.

Это проект с открытым исходным кодом, поэтому, если кто-то чувствует себя обязанным помочь с разработкой, это было бы здорово: https://github.com/nathan-osman/Rest-Easy

_{* надстройка доступна по адресу http://addons.mozilla.org всегда будет немного отставать от кода, доступного на GitHub}

ответ дан 22 окт ’15, 17:10

Вы специально просили «расширение или функциональность в Chrome и / или Firefox», что есть в ответах, которые вы уже получили, но мне нравится простота Ответ oezi на закрытый вопрос «как отправить почтовый запрос с помощью веб-браузера» для простых параметров. Оэзи говорит:

с формой, просто установите method в «post»

Т.е. создайте себе очень простую страницу для проверки действий поста.

ответ дан 23 мая ’17, 13:05

Вот Расширенный клиент REST расширение для Chrome.

Создан 17 июля ’20, 03:07

Для firefox есть также неплохое расширение RESTClient:

ответ дан 24 окт ’12, 22:10

Может не иметь прямого отношения к браузерам, но обманщик еще одно хорошее программное обеспечение.

ответ дан 09 мар ’19, в 18:03

Я думаю, что @Benny Neugebauer прокомментировал вопрос OP о Fetch API должен быть представлен здесь как ответ, поскольку OP искал в Chrome функциональность для ручного создания HTTP-запросов POST, и это именно то, что делает команда fetch.

Есть хороший простой пример Fetch API. здесь

Некоторые из преимуществ команды fetch действительно драгоценны: она проста, коротка, быстра, доступна и даже в качестве консольной команды она хранится на вашей консоли Chrome и может использоваться позже.

Конечно, основным недостатком здесь является то, что, в отличие от Postman, он не передает политику кросс-происхождения, но все же я считаю его очень полезным для тестирования в локальной среде или других средах, где я могу включить CORS вручную.

ответ дан 29 дек ’20, 16:12

ответ дан 12 дек ’13, 06:12

ответ дан 02 апр.