EN/CH Mode

BRUCE_FE Interview Notes - Common HTTP Status Codes

Organize common HTTP status codes meanings, usage scenarios and examples. Master HTTP status code knowledge frequently asked in frontend interviews, improve API development and error handling capabilities.

EN/CH Mode

Lazy to read articles? Then watch videos!

HTTP Status Code Overview

HTTP status codes are response codes from servers to client HTTP requests, using three-digit numbers to represent different response results.

1. 2xx - Success: Request has been successfully received, understood and accepted (e.g., 200 OK - Request successful)
2. 3xx - Redirection: Further action is needed to complete the request (e.g., 301 Moved Permanently - URL permanently moved)
3. 4xx - Client Error: Request contains syntax errors or cannot be completed (e.g., 401 Unauthorized - Unauthorized access, 403 Forbidden - Access forbidden, 404 Not Found - Resource not found)
4. 5xx - Server Error: Server encountered an error while processing the request (e.g., 500 Internal Server Error - Internal server error)

2xx - Success Status Codes

200 OK

Request successful. The returned information depends on the request method:

1. GET: Resource has been retrieved and returned in the response
2. POST: Resource created successfully, new resource returned in response
3. PUT/PATCH: Resource updated successfully

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 42

{"message": "Resource request successful", "data": {...}}

201 Created

Request successful and a new resource was created. Usually used after POST requests.

HTTP/1.1 201 Created
Location: /api/resources/12345
Content-Type: application/json
Content-Length: 42

{"id": "12345", "name": "New Resource", "created_at": "..."}

204 No Content

Request successful, but no content is returned. Commonly used for PUT, PATCH or DELETE operations.

HTTP/1.1 204 No Content
Date: Wed, 21 Oct 2023 13:45:26 GMT

3xx - Redirection Status Codes

301 Moved Permanently

The requested resource has been permanently moved to a new location. Browsers will automatically redirect and cache this redirection.

HTTP/1.1 301 Moved Permanently
Location: https://www.example.com/new-url
Content-Type: text/html

302 Found (Temporary Redirect)

The requested resource is temporarily located at a different URL. Unlike 301, browsers should not permanently cache this redirection.

HTTP/1.1 302 Found
Location: https://www.example.com/temporary-url
Content-Type: text/html

304 Not Modified

Resource not modified, cached version can be used. Usually a response to requests containing If-Modified-Since or If-None-Match headers.

HTTP/1.1 304 Not Modified
Date: Wed, 21 Oct 2023 07:28:00 GMT
ETag: "737060cd8c284d8af7ad3082f209582d"
Cache-Control: max-age=3600

4xx - Client Error Status Codes

400 Bad Request

The server cannot understand the request format, the client should modify the request and send it again.

HTTP/1.1 400 Bad Request
Content-Type: application/json
Content-Length: 35

{"error": "Request parameter format incorrect"}

401 Unauthorized

No authentication performed or authentication failed. Response must include WWW-Authenticate header to indicate how the client should authenticate.

HTTP/1.1 401 Unauthorized
WWW-Authenticate: Basic realm="Access to the staging site"
Content-Type: application/json
Content-Length: 27

{"error": "Authentication required"}

403 Forbidden

Server understands the request but refuses to execute it, insufficient permissions. Unlike 401, authentication will not change the result.

HTTP/1.1 403 Forbidden
Content-Type: application/json
Content-Length: 29

{"error": "No access permission"}

404 Not Found

The requested resource does not exist. May also indicate unwillingness to reveal whether the resource exists.

HTTP/1.1 404 Not Found
Content-Type: application/json
Content-Length: 27

{"error": "Resource not found"}

405 Method Not Allowed

Request method not supported. Should return Allow header indicating allowed methods.

HTTP/1.1 405 Method Not Allowed
Allow: GET, POST
Content-Type: application/json
Content-Length: 41

{"error": "PUT method not supported for this resource"}

429 Too Many Requests

User has sent too many requests in a given time period ("rate limiting").

HTTP/1.1 429 Too Many Requests
Content-Type: application/json
Retry-After: 3600
Content-Length: 41

{"error": "Request rate exceeded, please retry in 1 hour"}

5xx - Server Error Status Codes

500 Internal Server Error

The server encountered an unexpected condition that prevented it from fulfilling the request.

HTTP/1.1 500 Internal Server Error
Content-Type: application/json
Content-Length: 36

{"error": "Internal server error"}

502 Bad Gateway

A server acting as a gateway or proxy received an invalid response from an upstream server.

HTTP/1.1 502 Bad Gateway
Content-Type: application/json
Content-Length: 31

{"error": "Upstream server response invalid"}

503 Service Unavailable

Server temporarily overloaded or under maintenance. Retry-After header can indicate how long the client should wait before retrying.

HTTP/1.1 503 Service Unavailable
Retry-After: 120
Content-Type: application/json
Content-Length: 56

{"error": "Service temporarily unavailable, please retry in 2 minutes"}

504 Gateway Timeout

A server acting as a gateway or proxy timed out while waiting for a response from an upstream server.

HTTP/1.1 504 Gateway Timeout
Content-Type: application/json
Content-Length: 31

{"error": "Upstream server response timeout"}

🔥 Common Interview Questions

(1) What's the difference between 401 and 403 status codes?

401 Unauthorized

"I don't know you, please login first"

User has not provided authentication or authentication failed

403 Forbidden

"I know you, but you don't have permission"

User is authenticated but has insufficient permissions

(2) What's the difference between 301 and 302 redirects?

301 Permanent Redirect

URL permanently moved, always go to new address in the future

Browser will remember the new address

SEO: Ranking weight transfers to new URL

Usage scenarios:

1. Website domain change
2. Force HTTPS usage

302 Temporary Redirect

URL temporarily moved, next time still come to original address

Browser will always visit original URL first

SEO: Ranking remains on original URL

Usage scenarios:

1. A/B testing
2. Temporary page during maintenance

(3) How does frontend handle HTTP error codes?

Set up global error handler

Take different measures for different error codes

Display user-friendly error messages

Log errors and report for analysis

// Axios global error handling example
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401: // Unauthorized
          router.push('/login');
          break;
        case 403: // Forbidden
          showMessage('You don't have permission to perform this operation');
          break;
        case 404: // Not Found
          showMessage('Requested resource does not exist');
          break;
        case 500: // Server Error
          showMessage('Server error, please try again later');
          reportError(error);
          break;
      }
    } else {
      showMessage('Network connection failed');
    }
    return Promise.reject(error);
  }
);

(4) What's the difference between 200 OK and 204 No Content?

200 OK

Request successful, here's the data you requested

Applicable scenarios:

1. GET request to retrieve resources
2. Operations that need to return data

204 No Content

Request successful, but no data returned

Applicable scenarios:

1. DELETE operation successful
2. Operations that only need confirmation of success
3. Scenarios to save bandwidth

(5) What's the difference between 500 and 504 errors?

500 Internal Server Error

Internal server error

👨‍💻 → 🖥️ ❌

Server itself has an error

Troubleshooting directions:

1. Check server error logs
2. Check application code
3. Check database connection

504 Gateway Timeout

Gateway timeout error

👨‍💻 → 🔄 → 🖥️ ⏱️

Proxy waiting for upstream server timeout

Troubleshooting directions:

1. Check upstream server status
2. Check proxy timeout settings
3. Check network connection