Khi triển khai các ứng dụng Single Page Application (SPA) như React hoặc Vue.js lên CDN, Junior Developer thường gặp lỗi '404 Not Found' khi người dùng nhấn nút Refresh (F5) tại một đường dẫn con. Hãy giải thích nguyên nhân và đưa ra giải pháp cấu hình chuẩn tại CDN.

Question

Accepted Answer

Lỗi 404 Not Found khi tải lại trang ở các đường dẫn con trong ứng dụng SPA là một trong những vấn đề kinh điển mà các lập trình viên mới đi làm thường gặp phải khi đưa sản phẩm lên môi trường production sử dụng CDN lưu trữ tĩnh.
1. Nguyên nhân gốc rễ

Ứng dụng SPA hoạt động dựa trên cơ chế Client-side Routing (sử dụng HTML5 History API). Chỉ có một tệp index.html duy nhất nằm ở thư mục gốc.
Khi người dùng truy cập trang chủ https://example.com/, CDN trả về tệp index.html, sau đó JavaScript sẽ tự điều hướng giao diện đến /dashboard.
Tuy nhiên, khi người dùng nhấn F5 trực tiếp tại đường dẫn https://example.com/dashboard, trình duyệt sẽ gửi một HTTP request chính xác đến CDN yêu cầu tệp /dashboard hoặc /dashboard/index.html.
Do trên CDN lưu trữ thực tế không tồn tại thư mục hay tệp tin có tên là dashboard, Edge Server sẽ lập tức trả về mã lỗi 404 Not Found.

2. Giải pháp cấu hình chuẩn tại tầng CDN
Để khắc phục triệt để vấn đề này mà không cần dựng lại server Node.js cồng kềnh, cấu hình chuyển hướng trang lỗi (Custom Error Pages / Routing Rules) phải được thiết lập tại CDN:

Cấu hình Redirect/Rewrite Rule: Bắt mọi mã lỗi 404 Not Found từ các đường dẫn không phải tài nguyên tĩnh (như hình ảnh, js, css) và điều hướng toàn bộ các request đó về lại tệp index.html ở thư mục gốc với mã trạng thái HTTP trả về cho trình duyệt là 200 OK.

3. Ví dụ cấu hình mô phỏng

Nếu URL không khớp với bất kỳ tệp thực tế nào và không chứa phần mở rộng file (như .js, .css, .png), CDN sẽ thực hiện internal rewrite:
Request: /dashboard -> Serve: /index.html với status code 200.

4. Lưu ý kinh nghiệm thực chiến
Đảm bảo cấu hình bộ lọc phân biệt rõ ràng giữa tài nguyên tĩnh (có đuôi mở rộng) và các route của ứng dụng SPA để tránh việc các tệp hình ảnh bị thiếu thực sự lại trả về nội dung của file HTML, gây lỗi vỡ giao diện âm thầm.

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi cdn liên quan cùng chủ đề