HTTP
404 - Not Found
Seeing a 404 Not Found means the server couldn't locate the resource—wrong URL, deleted endpoint, typo in the path, or route handler doesn't exist. This client-side error (4xx) occurs when the request reaches the server but no route matches. Most common when API endpoints are misspelled or resources are deleted, but also appears when frontend routes don't match backend routes or HTTP methods are incorrect.
#Common Causes
- →Frontend: Typo in URL path (/api/user vs /api/users). Resource ID doesn't exist (deleted user, invalid ID). Incorrect HTTP method (GET instead of POST). Frontend routing doesn't match backend API structure.
- →Backend: Route handler missing for the endpoint. Resource deleted from database but URL still referenced. Incorrect route order (more specific routes after catch-all). Route parameters don't match expected format.
- →Infrastructure: Nginx rewrite rules don't match URL patterns. Reverse proxy routing misconfiguration. Static file serving fails (missing files in public directory). API gateway route mapping incorrect.
✓Solutions
- 1Step 1: Diagnose - Check DevTools Network tab—verify exact URL being requested. Compare with API documentation. Check if URL has typos or extra/missing slashes. Verify HTTP method matches endpoint requirements.
- 2Step 2: Diagnose - Check server logs for route matching attempts. Review Express/FastAPI route definitions. Verify resource exists in database with that ID. Check if route is defined before catch-all handlers.
- 3Step 3: Fix - Client-side: Validate resource IDs before requests. Show user-friendly "Resource not found" messages. Implement proper error boundaries for 404s. Double-check API endpoint URLs against documentation.
- 4Step 4: Fix - Server-side: Add catch-all 404 handler that returns JSON (not HTML) for API routes. Verify route ordering (specific routes before parameterized routes). Check database queries return null handling.
- 5Step 5: Fix - Infrastructure: Review Nginx location block order (specific paths first). Check proxy_pass URLs match backend routes. Verify static file directories exist. Review API gateway route mappings.
</>Code Examples
Fetch API: Graceful 404 Handling
1// Client-side: Handle 404 errors with user feedback
2async function fetchUser(userId) {
3 try {
4 const response = await fetch(`/api/users/${userId}`);
5
6 if (response.status === 404) {
7 // Show user-friendly error
8 showNotification('User not found', 'error');
9 return null;
10 }
11
12 if (!response.ok) {
13 throw new Error(`Request failed: ${response.status}`);
14 }
15
16 return await response.json();
17 } catch (error) {
18 console.error('Fetch error:', error);
19 showNotification('Failed to load user', 'error');
20 return null;
21 }
22}Express.js: API 404 Handler
1// Server-side: Proper 404 handling for APIs
2const express = require('express');
3const app = express();
4
5// API routes (must be before 404 handler)
6app.get('/api/users/:id', async (req, res) => {
7 const user = await db.users.findById(req.params.id);
8
9 if (!user) {
10 return res.status(404).json({
11 error: 'Not Found',
12 message: `User with ID ${req.params.id} not found`
13 });
14 }
15
16 res.json(user);
17});
18
19// Catch-all 404 handler for API routes (must be last)
20app.use('/api/*', (req, res) => {
21 res.status(404).json({
22 error: 'Not Found',
23 message: `API endpoint ${req.method} ${req.path} not found`,
24 availableEndpoints: ['/api/users', '/api/posts']
25 });
26});
27
28// For non-API routes (SPA fallback)
29app.use((req, res) => {
30 res.sendFile(path.join(__dirname, 'public', 'index.html'));
31 });Nginx: Proper Route Handling
1# Nginx: Handle API routes and SPA fallback
2server {
3 listen 80;
4 server_name api.example.com;
5 root /var/www/app/public;
6
7 # API routes - proxy to backend
8 location /api/ {
9 proxy_pass http://backend;
10 proxy_set_header Host $host;
11 proxy_set_header X-Real-IP $remote_addr;
12
13 # Return JSON 404 for API routes
14 error_page 404 = @api_not_found;
15 }
16
17 location @api_not_found {
18 default_type application/json;
19 return 404 '{"error":"Not Found","message":"API endpoint not found"}';
20 }
21
22 # Static files
23 location / {
24 try_files $uri $uri/ /index.html;
25 }
26}↗Related Errors
Provider Information
This error code is specific to HTTP services. For more information, refer to the official HTTP documentation.