HTTP request method and data type

POST request

In this post, we will take a look into HTTP request method and data type. With request method you can specify various actions between Frontend (Browser) and Backend (API server).

GET

This method is used when we want to get some data from server. For example: product list, product detail, ..etc. We can add query parameters to tell BE which data do we want to get.

api/v1/products?page=1&kind=electronic

Developer must not send sensitive data in query parameters like bank card id, email, … for security reason. The URL can be cached by browser.

GET request can also have request body. I personally don’t have reason to add body to GET request because your parameters will appear in two places: query parameters and request body.

Path parameters: we can use path specify parameters just like query. It will be separated by “/”. Benefit is your URL will be shorter and more specific, I guess.

Example for getting product detail
With query parameters: api/v1/products?id=1
With path parameters: api/v1/products/1

POST

This method is used when we want to send data to server for processing. For example: save new product, upload new file, …etc.

POST request can also have query or path parameters just like GET request. Normally I don’t use query or path parameters for POST request because I can have all data I need in request body.

Data type: The system should decide which data type is used for sending/receiving. Nowadays systems use JSON format. Old systems may use XML format for exchanging data. Data type is not limited by the system but individual request, we could use binary format for sending an image to server.

Example for posting product (create new)

URL: api/v1/products
Body (JSON): 
{
  "name": "Television",
  "price": 2000,
  "description": "fancy TV",
  "kind": "electronic"
}

PUT

It is similar to POST but it indicates an update action like updating product data.

PATCH

It is similar to PUT but it indicates partial update action. If PUT updates entire product data, PATCH will only update some fields in product data.

DELETE

It is similar to GET but it indicates a delete data action.

HEAD

It is similar to GET. It is used to test the response header. For example: If you use GET request to get image from server, server will return image detail in headers and image content will be in response body. With HEAD request, server should return only headers without image content. So that you can check content length before downloading the image.

OPTIONS

This request asks the server or a given URL about permitted communication options. The server should return information about allowed request methods, encoding, allowed origin, …etc.

Cross-Origin Resource Sharing (CORS): When you host web server and API server on the same domain, CORS can be ignored. If your web server and API server are on different domain, browser will send a preflight request to API server first to verify web server domain is allowed. This is always the problem for new developers. If they forgot to config CORS and have different domains for FE and BE, browser will block FE from making normal requests (GET, POST…).

Below request methods are rarely used in normal web development.

CONNECT: request a tunnel between client and server. If the request is successful, a TCP connection should be established. This connection will be used for something else, like executing commands on server.

TRACE: Performs message loop-back test along the path to the target resource. It can be used for debugging. Note that browser compatibility for this method is unknown.

Choosing correct request method and where request parameters are important. If you follow industry standards, you will get better in developing and especially you won’t upset other developers.

Reference documents:

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

HTTP request methods - HTTP | MDN