Всегда ли клиент виноват в получении 400 коде статуса

Всегда ли клиент виноват в получении 400 кода статуса?

Краткий ответ: нет. Статус код 400 Bad Request указывает на то, что сервер не может обработать запрос из-за ошибки в синтаксисе, но это не всегда вина клиента. В реальных приложениях причины могут быть разные, и разработчик фронтенда должен уметь их диагностировать.

Что значит HTTP 400 Bad Request

400 — это статус код 4xx (ошибки клиента), который указывает на то, что сервер отклонил запрос из-за:

• Неверного формата данных
• Отсутствия обязательных полей
• Неверного синтаксиса запроса
• Нарушения протокола HTTP

Когда клиент действительно виноват

// 1. Отправка невалидного JSON
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: '{ invalid json }'
});

// 2. Отсутствие обязательного поля
fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'John' })
});

// 3. Неверный формат данных
fetch('/api/users/search', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  body: '...'
});

// 4. Отправка Content-Type неправильного
fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: JSON.stringify({ data: 'test' })
});

Когда сервер виноват (но отвечает 400)

Это частые ситуации, когда сервер некорректно использует 400:

// 1. Нестрогая валидация на сервере
fetch('/api/posts', {
  method: 'POST',
  body: JSON.stringify({ title: 'Test', content: '' })
});

// 2. Проблемы с кодировкой
// Если клиент отправляет UTF-8, а сервер ожидает другую кодировку

// 3. Версия API изменилась
fetch('/api/v2/users', {
  method: 'POST',
  body: JSON.stringify({ username: 'john' })
});

Как диагностировать причину 400

Когда видишь 400, нужно проверить несколько моментов:

fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'John' })
})
.then(res => {
  if (!res.ok) {
    return res.json().then(err => console.error(err));
  }
  return res.json();
})
.catch(err => console.error('Network error:', err));

Правильная обработка 400 на фронтенде

async function handleRequest(url, options) {
  try {
    const response = await fetch(url, options);
    
    if (response.status === 400) {
      const error = await response.json();
      
      if (error.details && error.field) {
        console.error('Field error: ' + error.field);
      } else {
        console.error('Unexpected 400:', error);
      }
      return null;
    }
    
    if (!response.ok) {
      throw new Error('HTTP Error: ' + response.status);
    }
    
    return await response.json();
  } catch (error) {
    console.error('Request failed:', error);
    throw error;
  }
}

Итог

400 Bad Request — это не всегда вина клиента. Может быть:

• Вина клиента: отправка невалидного JSON, отсутствие поля, неверный Content-Type
• Вина сервера: неправильная валидация, изменение API без предупреждения, неправильное использование кода статуса
• Обоюдная вина: неполная документация API, недопонимание формата данных

Для фронтенд-разработчика важно уметь читать Network tab и ответ сервера для диагностики проблемы.