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.
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.1Host: localhost:8080Connection: keep-aliveContent-Length: 42Accept: application/jsonUser-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.36Sec-Fetch-Mode: corsContent-Type: application/jsonOrigin: http://localhost:8080Sec-Fetch-Site: same-originReferer: http://localhost:8080/Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414{"firstname":"lawrene","lastname":"ching"}
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.1Host: localhost:8080Connection: keep-aliveContent-Length: 33Accept: application/jsonUser-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.36Sec-Fetch-Mode: corsContent-Type: application/x-www-form-url-encodedOrigin: http://localhost:8080Sec-Fetch-Site: same-originReferer: http://localhost:8080/Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414firstname=lawrence&lastname=ching
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.1Host: localhost:8080Connection: keep-aliveContent-Length: 248Sec-Fetch-Mode: corsUser-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.36Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxUeB9pX0Gf0e8WToAccept: */*Origin: http://localhost:8080Sec-Fetch-Site: same-originReferer: http://localhost:8080/Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cookie: Idea-fe7adc80=f79c6aac-74a3-41fb-81ed-c9ffe183f414------WebKitFormBoundaryxUeB9pX0Gf0e8WToContent-Disposition: form-data; name="firstname"lawrence------WebKitFormBoundaryxUeB9pX0Gf0e8WToContent-Disposition: form-data; name="lastname"ching------WebKitFormBoundaryxUeB9pX0Gf0e8WTo--
[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