IMLC.ME
Search…
en-US
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
1
fetch('/api/user', {
2
method: 'POST',
3
headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
4
body: JSON.stringify({
5
firstname: 'lawrence',
6
lastname: 'ching'
7
})
8
})
Copied!
Request Content
1
POST /api/user HTTP/1.1
2
Host: localhost:8080
3
Connection: keep-alive
4
Content-Length: 42
5
Accept: application/json
6
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
7
Sec-Fetch-Mode: cors
8
Content-Type: application/json
9
Origin: http://localhost:8080
10
Sec-Fetch-Site: same-origin
11
Referer: http://localhost:8080/
12
Accept-Encoding: gzip, deflate, br
13
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
14
Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414
15
16
{"firstname":"lawrene","lastname":"ching"}
Copied!
application/x-www-form-urlencoded
Examples
1
fetch('/api/user', {
2
method: 'POST',
3
headers: {'Content-Type': 'application/x-www-form-url-encoded', 'Accept': 'application/json'},
4
body: 'firstname=lawrence&lastname=ching'
5
})
Copied!
Request Content
1
POST /api/user HTTP/1.1
2
Host: localhost:8080
3
Connection: keep-alive
4
Content-Length: 33
5
Accept: application/json
6
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
7
Sec-Fetch-Mode: cors
8
Content-Type: application/x-www-form-url-encoded
9
Origin: http://localhost:8080
10
Sec-Fetch-Site: same-origin
11
Referer: http://localhost:8080/
12
Accept-Encoding: gzip, deflate, br
13
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
14
Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414
15
16
firstname=lawrence&lastname=ching
Copied!
form-data
Examples
1
var formData = new FormData();
2
3
formData.append('firstname', 'lawrence');
4
formData.append('lastname', 'ching');
5
6
fetch('/api/user', {
7
method: 'POST',
8
body: formData
9
})
Copied!
Request Content
1
POST /api/user HTTP/1.1
2
Host: localhost:8080
3
Connection: keep-alive
4
Content-Length: 248
5
Sec-Fetch-Mode: cors
6
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
7
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxUeB9pX0Gf0e8WTo
8
Accept: */*
9
Origin: http://localhost:8080
10
Sec-Fetch-Site: same-origin
11
Referer: http://localhost:8080/
12
Accept-Encoding: gzip, deflate, br
13
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
14
Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414
15
16
------WebKitFormBoundaryxUeB9pX0Gf0e8WTo
17
Content-Disposition: form-data; name="firstname"
18
19
lawrence
20
------WebKitFormBoundaryxUeB9pX0Gf0e8WTo
21
Content-Disposition: form-data; name="lastname"
22
23
ching
24
------WebKitFormBoundaryxUeB9pX0Gf0e8WTo--
Copied!
References
Last modified 1yr ago
Copy link