HTTP POST

Compare to HTTP GET, there is a few differences in HTTP POST. 1. Declare POST instead of GET in the first line of request content 2. Declare POST content, use a blank line to separate from header part

There are 3 popular content types. To have a high level overview, below content demonstrates what the POST body looks like for 3 different content types.

application/json

Examples

fetch('/api/user', {
method: 'POST',
headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
body: JSON.stringify({
firstname: 'lawrence',
lastname: 'ching'
})
})

Request Content

POST /api/user HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 42
Accept: application/json
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
Sec-Fetch-Mode: cors
Content-Type: application/json
Origin: http://localhost:8080
Sec-Fetch-Site: same-origin
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414
{"firstname":"lawrene","lastname":"ching"}

application/x-www-form-urlencoded

Examples

fetch('/api/user', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-url-encoded', 'Accept': 'application/json'},
body: 'firstname=lawrence&lastname=ching'
})

Request Content

POST /api/user HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 33
Accept: application/json
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
Sec-Fetch-Mode: cors
Content-Type: application/x-www-form-url-encoded
Origin: http://localhost:8080
Sec-Fetch-Site: same-origin
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414
firstname=lawrence&lastname=ching

form-data

Examples

var formData = new FormData();
formData.append('firstname', 'lawrence');
formData.append('lastname', 'ching');
fetch('/api/user', {
method: 'POST',
body: formData
})

Request Content

POST /api/user HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 248
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxUeB9pX0Gf0e8WTo
Accept: */*
Origin: http://localhost:8080
Sec-Fetch-Site: same-origin
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414
------WebKitFormBoundaryxUeB9pX0Gf0e8WTo
Content-Disposition: form-data; name="firstname"
lawrence
------WebKitFormBoundaryxUeB9pX0Gf0e8WTo
Content-Disposition: form-data; name="lastname"
ching
------WebKitFormBoundaryxUeB9pX0Gf0e8WTo--

References

[1] https://tools.ietf.org/html/rfc7231#section-4.3.3 [2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST [3] Forms in HTML documents