The preface

The reason for writing this note is that a few days ago, when I was in joint communication with the backend, the two sides had a disagreement on the format of data transmission. When I tried to defend myself, I found that I was even confused about several common Content-Types, and was ridiculed by the backend for not knowing what format to upload.

I hope that through this note, I can remember the consequences of not summing up and thinking.

POST

The HTTP POST method sends data to the server. The Type of the request body is specified by the Content-Type header. Post requests can be sent using AJAX as well as HTML forms.

POST/HTTP/1.1 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=MomCopy the code

Content-Type

Content-type The entity header is used to indicate the MIME Type of the resource. In the response, the Content-Type header tells the client the Content Type of the actual returned Content.

In a native form form, you can specify the Content-Type through the encType field.

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description" value="some text">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>
Copy the code

In front and back end communication, we usually define data formats by the following three content-Type types: Application/X-ww-form-urlencoded, multipart/form-data and Application/JSON. Let me introduce them.

application/x-www-form-urlencoded

content-type: application/x-www-form-urlencoded; charset=UTF-8
Copy the code

As can be seen from the word urlencoded, its coding rules are the same as URL coding rules. In native form tags, if encType is not explicitly specified, the default data sent is Application/X-www-form-urlencoded. If you look at requests sent through this encoding rule, the data looks like this:

productId=94608&folderId=5fa00a2ce4b01e990ecee97b&skuId=440535
Copy the code

After urL-encoding, it looks like this:

encodeURIComponent("productId=94608&folderId=5fa00a2ce4b01e990ecee97b&skuId=440535")
// "productId%3D94608%26folderId%3D5fa00a2ce4b01e990ecee97b%26skuId%3D440535"
Copy the code

Does it look familiar? Because it passes the same parameters in the URL as the get method, each set of keys/Val is concatenated by &. This data format is different from using a URL directly, but puts the data inside the body.

About URL coding, Ruan Yifeng big man wrote a blog, interested in can see about URL coding

multipart/form-data

content-type: multipart/form-data; boundary=----WebKitFormBoundaryllpanFebLMmhdFGN
Copy the code

If you want to upload a binary file such as an image, you must transfer the data in multipart/form-data format. The body encapsulates the boundaries of multiple parts of the message using the Boundary field.

On why binary files must be uploaded via multipart/form-data instead of Application/X-www-form-urlencoded, the latter will use percent-encoding for non-alphabetic or numeric characters, Directly causing the inability to encode binary data.

When you use new FormData() in JS, you end up transferring data in the multipart/form-data format

application/json

content-type: application/json; charset=UTF-8
Copy the code

The simplest and most common format is suitable for structured data, especially if the data level is deep. As it is very convenient to serialize and deserialize the json format on the front and back ends, there are a large number of data interaction scenarios that transfer data through THE JSON format.

In the form submission scenario, unless file upload is involved, the form information is submitted through application/ JSON data.

It is worth noting that application/ JSON triggers a CORS precheck request, whereas the two mentioned above do not.

networkService.post({
  url: 'xxx/yyy'.data: JSON.stringify(data);
}).then(res= > {
  console.log(res);
}).catch(e= > {
  console.error(e);
})
Copy the code