Website 404 Error Summary

A 404 Not Found error usually means that the requested page, resource, or API endpoint does not exist. It may be caused by server configuration issues, application routing, missing files, or cache problems. This page summarizes the most common 404 scenarios and their solutions.

📌 1. Incorrect Routes or File Paths

• Files deleted or inconsistent naming (case-sensitive)
• SPA frameworks (Vue/React) not configured with history mode fallback
• Nginx/Apache not correctly pointing to the website root directory

📌 2. Improper Nginx / Apache Configuration

• Incorrect root or alias directory configuration
• Reverse proxy returning 404 from backend (API path mismatch)
• Rewrite rules not working, e.g. WordPress or Laravel

📌 3. Frontend Build Path Issues (Vue / React)

• publicPath not set correctly during build
• Page refresh (F5) causing static routes to break
• Static resources returning 404 (incorrect CSS/JS paths)

📌 4. CDN / Cache Related 404 Errors

• Cloudflare / Alibaba CDN cached outdated paths
• DNS changes not fully propagated
• Object storage (OSS/S3) files deleted while CDN still requests old URLs

📌 5. REST API / Backend Returning 404

• API route does not exist
• Incorrect HTTP method (GET vs POST)
• Reverse proxy path not correctly mapped

• Verify the URL is correct (case-sensitive)
• Check whether Nginx / Apache configurations are properly loaded
• Confirm the file actually exists in the target directory
• Check frontend static resource paths
• Use browser DevTools (F12) to identify which resources return 404
• Clear CDN / Cloudflare cache
• Ensure APIs are proxied to the correct backend endpoint

• Add try_files $uri /index.html for SPA apps (Vue/React)
• Fix Nginx root/alias configuration
• Ensure application routing (Laravel / ThinkPHP, etc.) enables rewrite rules
• Verify static asset directories were not accidentally removed
• Cloudflare → Purge Cache
• Sync API changes with reverse proxy configurations