Skip to content

Content-Type

Description

The Content-Type request header is used to indicate the media type of the resource being sent to the server. This header is crucial in HTTP requests as it tells the server how to interpret the body of the request, ensuring that data is correctly processed. It is often used in POST and PUT requests where data is included in the request body. The Content-Type header follows the MIME type standard, specifying the data format such as JSON, XML, or form-encoded data.

Common values for the Content-Type header include:

  • application/json (for JSON data)
  • application/xml (for XML data)
  • text/plain (for plain text)
  • multipart/form-data (for file uploads and form data)
  • application/x-www-form-urlencoded (for form submissions)

Syntax

The Content-Type header is structured as follows:

Content-Type: <media-type>; charset=<character-encoding>

Example:

Content-Type: application/json; charset=UTF-8

This example indicates that the request body contains JSON data encoded in UTF-8.

multipart/form-data

The multipart/form-data content type is commonly used when submitting form data that includes files. It allows multiple parts of different types (such as text fields and file uploads) to be sent in a single request. Each part is separated by a boundary, which is a unique string defined in the header.

Structure:

  • Each part has its own headers, including Content-Disposition (which defines the name of the field and filename for file uploads).
  • The request body contains multiple sections separated by a unique boundary.

Example:

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary12345

------WebKitFormBoundary12345
Content-Disposition: form-data; name="username"

JohnDoe
------WebKitFormBoundary12345
Content-Disposition: form-data; name="file"; filename="example.jpg"
Content-Type: image/jpeg

(binary file content here)
------WebKitFormBoundary12345--

In this example: - A text field (username) is submitted. - A file (example.jpg) is uploaded with its MIME type specified (image/jpeg).

application/x-www-form-urlencoded

The application/x-www-form-urlencoded content type is the default encoding for HTML form submissions. It encodes form fields as key-value pairs, separated by &, with special characters URL-encoded.

Structure:

  • Each key-value pair is joined by =.
  • Pairs are concatenated using &.
  • Special characters (e.g., spaces) are percent-encoded (+ for spaces, %20 for spaces in some cases).

Example:

POST /submit HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

username=JohnDoe&password=SecurePass123

In this example: - A form submission includes a username and password. - The values are URL-encoded (e.g., spaces would be converted to +).

Examples

JSON Request Example:

POST /api/data HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "John Doe",
  "email": "[email protected]"
}

Form Submission Example (application/x-www-form-urlencoded):

POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

username=JohnDoe&password=MySecretPass

File Upload Example (multipart/form-data):

POST /profile HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----BoundaryString

------BoundaryString
Content-Disposition: form-data; name="profile_picture"; filename="profile.jpg"
Content-Type: image/jpeg

(binary image data)
------BoundaryString--