freeCodeCamp/curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-po...

46 lines
2.8 KiB
Markdown
Raw Normal View History

2018-10-25 18:29:56 +00:00
---
id: 587d7fb2367417b2b2512bf7
title: Use body-parser to Parse POST Requests
challengeType: 2
---
## Description
<section id='description'>
fix/reformat-basic-node-express-challenges (#35424) * fix/reformat-basic-node-express-challenges * add semi-colon Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/get-query-parameter-input-from-the-client.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-an-html-file.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com>
2019-03-06 23:20:17 +00:00
Besides GET, there is another common HTTP verb, it is POST. POST is the default method used to send client data with HTML forms. In REST convention, POST is used to send data to create new items in the database (a new user, or a new blog post). You dont have a database in this project, but you are going to learn how to handle POST requests anyway.
In these kind of requests, the data doesnt appear in the URL, it is hidden in the request body. This is a part of the HTML request, also called payload. Since HTML is text-based, even if you dont see the data, it doesnt mean that it is secret. The raw content of an HTTP POST request is shown below:
2018-10-25 18:29:56 +00:00
<blockquote>POST /path/subpath HTTP/1.0<br>From: john@example.com<br>User-Agent: someBrowser/1.0<br>Content-Type: application/x-www-form-urlencoded<br>Content-Length: 20<br>name=John+Doe&age=25</blockquote>
fix/reformat-basic-node-express-challenges (#35424) * fix/reformat-basic-node-express-challenges * add semi-colon Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/get-query-parameter-input-from-the-client.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-an-html-file.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com>
2019-03-06 23:20:17 +00:00
As you can see, the body is encoded like the query string. This is the default format used by HTML forms. With Ajax, you can also use JSON to handle data having a more complex structure. There is also another type of encoding: multipart/form-data. This one is used to upload binary files.
In this exercise, you will use a urlencoded body. To parse the data coming from POST requests, you have to install the <code>body-parser</code> package. This package allows you to use a series of middleware, which can decode data in different formats.
2018-10-25 18:29:56 +00:00
</section>
## Instructions
<section id='instructions'>
fix/reformat-basic-node-express-challenges (#35424) * fix/reformat-basic-node-express-challenges * add semi-colon Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/get-query-parameter-input-from-the-client.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-an-html-file.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/start-a-working-express-server.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests.english.md Co-Authored-By: moT01 <20648924+moT01@users.noreply.github.com>
2019-03-06 23:20:17 +00:00
Install the <code>body-parser</code> module in your <code>package.json</code>. Then, <code>require</code> it at the top of the file. Store it in a variable named <code>bodyParser</code>. The middleware to handle urlencoded data is returned by <code>bodyParser.urlencoded({extended: false})</code>. Pass to <code>app.use()</code> the function returned by the previous method call. As usual, the middleware must be mounted before all the routes which need it.
<strong>Note:</strong> <code>extended=false</code> is a configuration option that tells the parser to use the classic encoding. When using it, values can be only strings or arrays. The extended version allows more data flexibility, but it is outmatched by JSON.
2018-10-25 18:29:56 +00:00
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: The 'body-parser' middleware should be mounted
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/add-body-parser'').then(data => { assert.isAbove(data.mountedAt, 0, ''"body-parser" is not mounted correctly'') }, xhr => { throw new Error(xhr.responseText); })'
2018-10-25 18:29:56 +00:00
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>