Content-Type: типы данных

Content-Type — HTTP-заголовок, указывающий MIME-тип тела запроса или ответа, чтобы получатель знал, как его интерпретировать.

Зачем нужно

Без Content-Type сервер не знает, как разобрать тело запроса: JSON, форма или файл. Браузер не знает, как отобразить ответ: как страницу, изображение или заставить скачать файл. Неверный тип приводит к ошибкам парсинга и неожиданному поведению.

Где используется

  • В запросах POST/PUT/PATCH — описывает формат тела запроса
  • В ответах сервера — описывает формат ответа
  • В <form> — атрибут enctype задаёт Content-Type при отправке
  • В заголовке Accept — клиент сообщает, какие типы он понимает

Основные MIME-типы

Для API-запросов

# JSON — самый распространённый для REST API
Content-Type: application/json

# Форма с текстовыми полями (нет файлов)
Content-Type: application/x-www-form-urlencoded

# Форма с файлами (multipart)
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxk

Для ответов сервера

# HTML-страница
Content-Type: text/html; charset=utf-8

# CSS
Content-Type: text/css

# JavaScript
Content-Type: application/javascript

# Изображения
Content-Type: image/png
Content-Type: image/jpeg
Content-Type: image/svg+xml

# Файл для скачивания
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="report.pdf"

# PDF
Content-Type: application/pdf

Примеры fetch-запросов

// JSON — нужно вручную указать заголовок и stringify
const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Антон', email: 'anton@example.com' }),
});

// Форма urlencoded
const params = new URLSearchParams({ name: 'Антон', email: 'anton@example.com' });
const res2 = await fetch('/api/submit', {
  method: 'POST',
  // Content-Type выставляется автоматически для URLSearchParams
  body: params,
});

// Загрузка файла — multipart/form-data
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', 'Аватар');
const res3 = await fetch('/api/upload', {
  method: 'POST',
  // Content-Type с boundary выставляется автоматически для FormData
  body: formData,
});

Парсинг по Content-Type на сервере (Express)

const express = require('express');
const app = express;

// Парсинг JSON-тела
app.use(express.json());

// Парсинг urlencoded форм
app.use(express.urlencoded({ extended: true }));

app.post('/api/users', (req, res) => {
  // req.body заполнен благодаря middleware выше
  console.log(req.body); // { name: 'Антон', email: '...' }
});

Частые ошибки

  • Забыть Content-Type: application/json при отправке JSON — сервер получает пустой req.body
  • Вручную указывать Content-Type: multipart/form-data без boundary — браузер не сможет разобрать
  • Возвращать неверный Content-Type — браузер отображает JSON как текст или скачивает HTML
  • Использовать application/x-www-form-urlencoded для вложенных объектов — они не сериализуются корректно

Связанные темы

Ресурсы