常見的 HTTP Status Code 2xx、4xx、5xx

前言

只要你有在上網,那麼你就一定會看到這個 HTTP Status Code,如果你未來想要邁向後端工程師,那麼 HTTP Status Code 你就不能不了解,因此就讓我們來認識哪些是常見的 HTTP Status Code 吧。

HTTP 狀態碼(HTTP Status Code)

首先這一篇不會全部都說明,因為 HTTP Status Code 實在太多情境也很多,因此只會列出一些常見、基本的 HTTP Status Code,只要能夠掌握這八成的基本 HTTP Status Code,那麼對於自己開發上也可以加快 debug。

HTTP 狀態碼可區分為五大類:

  • 1xx 消息
  • 2xx 成功
  • 3xx 重新導向
  • 4xx 客戶端錯誤
  • 5xx 伺服器錯誤

基本上你只要看到前面的數字,你就可以辨別出當前的狀況,例如…只要你看到 5xx 就代表一定跟後端有關,如果是 4xx 那就會是使用者 or 開發者在串接資料上有錯等等。

如果你不想記太多東西的話,那只要知道上面五大類就好,剩下的部分通通靠查的,因此底下只會列出非常常見的 HTTP Status Code 而已唷。

反正你最常見的一定是 404。

啊,啊,啊,這是一個不存在的頁面~

2xx 成功

看到 2xx 就非常的簡單,因為你在做網頁任何操作時,最常見的就是 200許多開發上在預設設置上都會是 200,以 Express.js 來講就算你只寫以下

1
2
3
router.get('/', (req, res) => {
res.send('True');
})

只要使用者可以正常取得路徑該資源,一率都會預設回傳 200,因此 200 是非常常見的狀態碼。

所以 200 我們可以簡單結論一下就是「你成功拿到資源、成功取得頁面」的意思。

3xx 重新導向

3xx 狀態碼中最常用的就是 301 Moved Permanently 與 302 Found

301 Moved Permanently

通常來講我們在開發到一定階段之後,可能某些頁面會做調整,那 301 就是在告知瀏覽器這個頁面已經永久改到某處,因此 Express.js 可能就會寫成以下

1
2
3
router.get('/', (req, res) => {
res.status(301).redirect('http://yourotherdomain.com')
})

例如你在輸入 www.google.com 的時候會被導向到沒有 wwwgoogle.com 網域。

302 Found

但如果今天只是暫時性調整位置呢?那就一樣的做法

1
2
3
router.get('/', (req, res) => {
res.status(302).sendFile(__dirname, 'newPage.html');
})

只是這個頁面只是暫時的而已。

4xx 客戶端錯誤

4xx 的狀態碼狀況就非常非常多了,多到你受不了。

400 Bad Request

400 的狀況多到很難舉例,簡單來講就是如果你給了一些錯誤的格式,可能你應該要給一個 JSON 格式,但你卻給了 Array,又或者是檔案太大這也是歸類於 400

401 Unauthorized

401 這個狀態碼比較常見於需要驗證的頁面,例如後台管理介面,你如果沒有提供一些身份認證(Token) 等,那麼就會收到這個 Status Code,而 401 也包含著拒絕你的意思。

因此你可以這樣理解「因為你還沒有提供資料給我認證,所以我拒絕給你東西」,真要濃縮的話,就是「尚未登入」的意思。

403 Forbidden

403401 有一點相似,但是 403 類似於「我拒絕你」、「類似黑名單」的意思,我拒絕你訪問 or 取得資料,例如你只有產品列表的讀取權限,但你卻在嘗試讀取訂單列表的資料,那麼就會得到 403 的狀態碼。

換個方向來理解的話,那就是「小明對你告白,但你拒絕他並封鎖他」的意思(好悲傷)。

404 Not Found

不得不說只要你有在上網,或多或少一定會遇到 404 這個錯誤,而這個狀態碼最常見於「找不到這個資源、路徑或頁面」等,如果你點這個網址你就會進入到我製作的 404 頁面

404 Error

因此 404 可以說是你最基本最常見的 HTTP Status Code,而這個頁面也對於 SEO 來講非常重要,因為要告知使用者沒有這個頁面,所以你應該會看到很多很精緻的 404 頁面

找不到網頁

若是套用在串接 AJAX 上,那麼就是你輸入錯的 API Url 導致找不到資源,而 Express.js 本身也會幫你預設好這一段

1
2
3
app.use(function(req, res, next) {
next(createError(404));
});

簡單來講 404 所代表得意思就是「找不到這個頁面、找不到這個路徑 or 找不到這個資源」的意思。

5xx 伺服器錯誤

基本上如果你是一名前端工程師的話,看到 5xx 開頭的錯誤就有 6~7 成可以丟給後端來處理,因為這方面的錯誤訊息大多都跟伺服器有相關。

500 Internal Server Error

500 是一個非常萬用的錯誤碼,你在網路上可能也會逛著逛著就遇到這個狀態,可能是剛剛好伺服器發生了一些無可避免的錯誤導致伺服器無法給相對應的一些資訊。

500 Internal Server Error

而這一段也是 Express.js 預設就會幫你寫好的

1
2
3
4
5
6
7
8
9
10
// error handler
app.use((err, req, res, next) => {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
res.status(err.status || 500);
res.render('error');
});

503 Service Unavailable

503 也是一個非常容易看到的狀態碼,通常發生於流量爆掉或者是伺服器臨時要維修,但通常不會太久。

參考文獻