Lỗi ERR_CACHE_MISS khi quay lại trang biểu mẫu trên Chrome

Hiện tượng "ERR_CACHE_MISS" thường phát sinh khi người dùng sử dụng nút quay lại (Back) sau khi gửi biểu mẫu bằng phương thức POST. Lỗi này liên quan trực tiếp đến cách trình duyệt xử lý bộ nhớ đệm cho các yêu cầu POST, đặc biệt khi dữ liệu biểu mẫu không được lưu trữ đúng cách.

Nguyên nhân chính

Trình duyệt Chrome không lưu trữ phản hồi từ yêu cầu POST vào bộ nhớ đệm theo mặc định. Khi quay lại trang chứa biểu mẫu, Chrome không thể tự động khôi phục dữ liệu gửi trước đó, dẫn đến lỗi này. Các yếu tố gây ra bao gồm:

  • Thiếu cấu hình header Cache-Control phù hợp trên server
  • Thiết lập bộ nhớ đệm của trang không hỗ trợ định dạng POST
  • Cơ chế xử lý biểu mẫu không sử dụng mô hình chuyển tiếp (PRG)

Giải pháp kỹ thuật

1. Cấu hình bộ nhớ đệm cho trang biểu mẫu

Thêm header sau vào phản hồi HTTP để chỉ định bộ nhớ đệm riêng tư cho người dùng:

// PHP
header('Cache-Control: private, no-store, no-cache, must-revalidate');
header('Pragma: no-cache');

// Node.js
app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'private, no-store, no-cache, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  next();
});

2. Triển khai mô hình PRG (Post-Redirect-Get)

Chuyển hướng người dùng sau khi xử lý biểu mẫu để tránh gửi lại dữ liệu POST:

// PHP
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Xử lý dữ liệu biểu mẫu
  // ...
  header('Location: /success-page');
  exit();
}

3. Gửi biểu mẫu qua AJAX

Thay thế phương thức truyền thống bằng fetch API để tránh chuyển hướng:

const form = document.getElementById('dataForm');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const response = await fetch('/process', {
    method: 'POST',
    body: formData
  });
  if (response.ok) window.location.href = '/confirmation';
});

4. Xử lý biểu mẫu bằng token duy nhất

Thêm token xác thực vào biểu mẫu và kiểm tra khi gửi:

// Tạo token khi tải trang
const token = Math.random().toString(36).substring(2, 15);
sessionStorage.setItem('form_token', token);

// Trong biểu mẫu
<input type="hidden" name="security_token" value="<?php echo $token; ?>">

// Kiểm tra khi xử lý
if (sessionStorage.getItem('form_token') !== $_POST['security_token']) {
  die('Lỗi xác thực biểu mẫu');
}

Thẻ: HTTP-Cache PRG-Redirection Form-Token AJAX-Submission

Đăng vào ngày 24 tháng 6 lúc 10:09