“This is the 17th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Recently, I often encounter content-type Content when writing interface, and use different content-type values when uploading and downloading files. Therefore, I will sort out the use of content-type here.

1. What is content-Type

In the HTTP request of the front and back end interaction, the content-type is a very frequent Content. The content-type is used to define the Type of network files and the encoding of the web page. The browser will read the Content in the request or return the result according to the encoding mode specified by the content-type. Such as web pages, pictures, documents, etc.

Content-type is a type of content. It can also be called MediaType, Internet MediaType, or MIME-type. The Content-Type is present in the HTTP request header and tells the server and client what encoding and style to parse the data in when it is received.

2. Content-type Defines the format

Syntax: content-type: Type /subtype; parameter

Among them,

  • Type represents the main type, usually text, application, image, multipart, etc
  • Subtype indicates a subtype, usually a file format such as HTML, XML, or JSON
  • Parameter indicates the encoding mode, such as UTF-8, and is optional

The following is the true definition of content-type:

  1. Content-Type: text/html; charset=utf-8, is defined as the HTML parsing format and is encoded in UTF-8
  2. Content-Type: multipart/form-data; boundary=something, defined as a form submission binary

3. Common content-type

The following are common content-type types, with the bold content-Type being used more frequently in project development.

  • Text/HTML: The content will be parsed to HTML web page format
  • Text /plain: plain text format
  • Text/XML: indicates the XML file format. The content is parsed as XML
  • Application/XML: in XML format, the encoding is UTF-8 by default
  • Application /json: Json data format
  • Application/X-www-form-urlencoded: Form form data is coded as key=value format and sent to the server (default form submission data format)
  • Application /octet-stream: binary stream data (e.g. common file downloads)
  • Multipart /form-data: This format is used when files need to be uploaded in the form

4. Select the actual Content-Type

In HTTP-based front and back end interactions, different content-Types are specified according to different requirements.

When making a front-end HTTP request, you can set the specific type of the Content-Type in the HTML form tag or in the request header

  • For normal form submission, you can set it to Content-Type: Application/X-www-form-urlencoded, which is also the default content type for form submission
  • If the back-end service interface is restful, that is, it receives parameters in JSON format, define content-Type: application/ JSON
  • If the service interface is for uploading files, you need to define content-Type: multipart/form-data

SetContentType (“text/ HTML; Charset = UTF-8 “) sets the response header format

  • If an HTML web page is returnedresponse.setContentType("text/html"), the returned HTML format will be interpreted by the browser as web page data
  • If it is in XML formatresponse.setContentType("text/xml")The browser displays structured XML data
  • If it is an image file, yesresponse.setContentType("image/png"), the browser will parse the displayed image
  • If you are downloading a file, set the content format and use it furtherresponse.setHeader("Content-Disposition","attachment; FileName = fileName. The suffix ")
    • Because browsers parse files in browsers by default when the service returns a file type (similar to preview), setting Content-Disposition turns off browser parsing and downloads files directly

Note: If garbled characters occur during the HTTP request, that is, data encoding and decoding are inconsistent, you can consider:

  1. Backend garbled, when receive front-end data backend can use request. SetCharacterEncoding (” utf-8 “) set the parsing decoding mode
  2. Garbled characters appear when the front-end browser parses data returned by the back-end. Utf-8 encoding is added when the content type is set on the back-end, as shown in the following figureresponse.setContentType("text/html; charset=utf-8")And the front-end browser should also set the encoding to UTF-8 when receiving