Introduction to the

HTTP request header/response header Content-Type Specifies the media Type of the resource to be transmitted to the receiver. For example, if you are transferring images, the media type might be Image/PNG, image/ JPG.

In the browser, the browser will determine the resource Type of the response body based on the content-type, and then make different displays based on different file types. For example, if content-Type: image/ JPEG is specified in the Response Header for the same image, the browser will display it as an image. If the Content-Type is not declared, the browser will display it as text. As follows:

Code:


       
header('Content-type: image/jpeg');//with header Content type  
echo file_get_contents("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"); 
? > 
Copy the code

The Output: Code:


      
// Without header 
echo file_get_contents("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"); 
? > 
Copy the code

The Output:

? PNG IHDRX?? '? ICCPsRGB IEC61966-2.1 (? u?? +DQ?? 3???????????????? 63?? P???? H? U???? l?? RDJV??? 9oF? $sn???? {N??? pZ?? ^? d? Z(p? E? ] ?? h?? QEW? f?? T?? {, f??????????? z? aE?????? y??? 6%]>vkrA? ; S????? d?? M? ¡ ? 6??? ` %??????? &??? Q-Z? j???? BSZo? a??? }N ? ._u {?? #?? N? g? {-bKGD??????? pHYs.#.#x?? vtIME? 4 _? X IDATx?? w? U?????? MB$?? $@ @? 2t?" EDa???" ? C? *C???? Hq? ja?? w ???????? L{?? }? }???? w? ; ?? {????? {4,??? j??? q10?? _???? h2]`P?? : ^? 5?? @ ? W? =???????? XY??? W .?? 9?? `z? 1? ! V?? B???? XM~^? |? 1? qm??? (? h?? C? OV? js{e? + L? b? {%? @ `? +:sQ? @?Copy the code

specification

The syntax of content-type is as follows:

Content-Type: text/html; charset=UTF-8
Content-Type: multipart/form-data; boundary=something
Copy the code

The Content-Type contains three directives:

  • Media Type: Specifies the type of media (MIME) used to transmit data.
  • Charset: specifies the character set used to transmit data.
  • Boundary: a data boundary that is required when there are multipart data entities (multipart/form-data, multipart/byteranges) to encapsulate the boundaries of multiple parts of a message. It consists of 1 to 70 characters and is automatically generated in the browser. The character set is robust to passing through the gateway and does not end with a blank space.

Common data types for POST requests

GET and POST are the two most commonly used HTTP request methods. For GET requests, the data that needs to be passed is relatively simple and we usually pass it as a QueryString, such as https://test.com/api?a=1&b=2, so the value of the Content-Type is not that important. For POST requests, the value of the Content-Type is very important and needs to be selected for different scenarios.

In the Form Form, the value of the encType attribute determines the encoding in which the data is transferred. The default value is Application/X-www-form-urlencoded. See W3C: Form Content Types for details.

1. application/x-www-form-urlencoded

This value is the default encoding of the Form. When this value is used, the content of the Form must be encoded as follows:

  1. Spaces are converted to + signs; Other characters that are not alphanumeric are converted to ASCII with a two-digit hexadecimal representation like “%E0”; Newlines are converted to “CR LF”;
  2. Data item name and data value are separated by “=” sign, and data items are separated by “&”.

Example:

<form action="https://xxx.com/api/submit" method="post">
    <input type="text" name="name" value="Javon Yan">
    <input type="text" name="age" value="18">
    <button type="submit">Submit</button>
</form>
Copy the code

Request header and request body:

// Request Header 部分省略
POST /foo HTTP/1.1
Content-Length: 37
content-type: application/x-www-form-urlencoded

// Body
name=Javon+Yan&age=18
Copy the code

2. multipart/form-data

Application/X-www-form-urlencoded is inefficient for transfer of binary files or non-ASCII characters. For content that contains files, binary data, and non-ASCII characters, use multipart/form-data. The request body of multipart/form-data contains multiple parts, which need to be separated by boundary character.

In the following example, the encType of the Form Form is set to multipart/form-data. The request header and request body are shown below. The browser automatically generates a random boundary and adds it to the request header content-Type. The request body also segmented the data of each field based on the generated boundary.

Example:

<form action="https://xxx.com/api/submit" method="post" enctype="multipart/form-data">
    <input type="text" name="name" value="Javon Yan">
    <input type="text" name="age" value="18">
    <input type="file" name="file">
    <button type="submit">Submit</button>
</form>
Copy the code

Request header and request body:

// Request Header part omitted POST /foo HTTP/1.1 Content-Length: 10240 Content-type: multipart/form-data; boundary=----WebKitFormBoundaryujecLxDFPt6acCab // Body ------WebKitFormBoundaryujecLxDFPt6acCab Content-Disposition: form-data; name="name" Javon Yan ------WebKitFormBoundaryujecLxDFPt6acCab Content-Disposition: form-data; name="age" 18 ------WebKitFormBoundaryujecLxDFPt6acCab Content-Disposition: form-data; name="file"; filename="avatar.png" Content-Type: image/png ... (png binary data) .... ------WebKitFormBoundaryujecLxDFPt6acCab--Copy the code

3. application/json

Application/JSON is a common response header, and is also popular in POST requests. It is transmitted as a serialized JSON string, which is easier to parse and more readable at the back end.

By default, the wx.request API in wechat applet uses this method to transmit data.

4. application/octet-stream

Used to transmit binary data. Can be used to upload files. In Postman, you can also see the type “binary”, which refers to some binary file type. For example, application/ PDF, specifies the MIME type of a particular binary file. For text file types, if there is no specific subtype, text/plain is used. Similarly, binaries without a specific or known subtype use application/octet-stream, which is the default value for application files and is rarely used directly.

For application/ OCtet-stream, only binaries can be committed, and only one binary can be committed, and only one file, if any, can be committed, and only one background receiver can be a stream (or byte array).

Many Web servers use the default application/ OCtet-stream to send unknown types. For security reasons, the browser does not allow custom default actions for these resources, so users must store them locally for use. In general, it is important to set the correct MIME type.

Other common values

  • Text: Text /plain, text/ HTML, text/ CSS, text/javascript, and text/ XML
  • Image: image/ GIF, image/ PNG, image/ JPEG
  • Video: Video/webM, video/ OGG
  • Audio: Audio/MIDI, Audio/MPEG, audio/ webM, audio/ OGG, audio/ WAV
  • Binary: application/octet-stream, application/ PDF, application/ JSON

reference

  • W3C: Form Content Types
  • MDN: MIME type
  • Cloud.tencent.com/developer/a…