К чему может привести кэширование POST-запроса

Проблемы кэширования POST-запросов

Этот вопрос проверяет понимание HTTP протокола, семантики методов и потенциальных ошибок при работе с сетевыми запросами.

Основная проблема

POST-запросы по умолчанию не должны кэшироваться, так как они используются для изменения состояния на сервере (создание, обновление, удаление данных). Если случайно закэшировать POST:

Основные последствия

1. Дублирование операций

// Пример: создание заказа
function createOrder(data) {
  return fetch("/api/orders", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
}

// Если это закэшируется, второй вызов вернет кэшированный ответ
// вместо создания нового заказа
createOrder({ item: "book" });  // Создает заказ #1
createOrder({ item: "book" });  // Вернет результат первого вызова вместо создания #2

2. Несогласованность данных

// User interface может показывать старые данные
const oldResponse = { success: true, orderId: 123 };
// Фронт думает, что создан заказ #123, но на сервере создан #124

3. Финансовые потери

// Payment операция
postJSON("/api/payment", { amount: 100, card: "****4242" })
  .then(res => {
    // Если кэшировать, повторная попытка может обойти платёж
    // но фронт покажет "успешно"
  });

Как это может случиться?

Неправильные заголовки Cache-Control

// На сервере ошибочно установлены:
Cache-Control: max-age=3600  // Опасно для POST!
Pragma: public

// Браузер будет кэшировать POST ответ на час

Service Worker с неправильной логикой

// ❌ Плохо — кэширует все запросы
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(res => res || fetch(event.request))
  );
});

// ✅ Хорошо — исключает POST
self.addEventListener("fetch", (event) => {
  if (event.request.method === "POST") {
    return event.respondWith(fetch(event.request));
  }
  event.respondWith(
    caches.match(event.request)
      .then(res => res || fetch(event.request))
  );
});

Неправильная конфигурация HTTP proxy

# Nginx или другой proxy может ошибочно кэшировать POST
proxy_cache_methods GET HEAD POST;  # ❌ POST не должен здесь быть
proxy_cache_key "$request_method$request_uri";  # Неправильно

Правильный подход

1. Никогда не используйте Cache-Control для POST

// На сервере:
response.headers["Cache-Control"] = "no-store, no-cache, must-revalidate";
response.headers["Pragma"] = "no-cache";

2. Используйте правильные HTTP методы

// Создание — POST
fetch("/api/items", { method: "POST", body: JSON.stringify(data) });

// Обновление — PUT или PATCH
fetch("/api/items/123", { method: "PUT", body: JSON.stringify(data) });

// Чтение — GET (может кэшироваться)
fetch("/api/items", { method: "GET" });

// Удаление — DELETE
fetch("/api/items/123", { method: "DELETE" });

3. Явно отключайте кэширование в клиенте

fetch("/api/orders", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Cache-Control": "no-store"  // Некоторые клиенты это читают
  },
  body: JSON.stringify(data)
});

4. Используйте React Query или SWR правильно

import { useMutation } from "@tanstack/react-query";

const mutation = useMutation({
  mutationFn: async (data) => {
    const res = await fetch("/api/orders", {
      method: "POST",
      body: JSON.stringify(data)
    });
    return res.json();
  },
  onSuccess: () => {
    // Инвалидировать кэш GET запросов
    queryClient.invalidateQueries({ queryKey: ["orders"] });
  }
});

Резюме

Кэширование POST приводит к:

• Дублированию операций
• Потере данных
• Финансовым ошибкам
• Несогласованности между клиентом и сервером

Помните: POST = mutation = never cache