前言

在 Web 開發中，經常會出現重定向的情況，重定向指的是將一個網絡請求重新定個方向，向新的方向發起請求。常見的重定向有網頁重定向，訪問一個網頁時卻跳轉到另外一個網頁；也有域名重定向，向某個域名發起請求卻自動變成請求另外一個域名。

實現原理

URL 重定向是由客戶端完成的（通常是瀏覽器），客戶端發出請求後，服務器做出響應，如果響應頭的狀態碼為 301 或者 302，此時響應頭中會多出一個 Location 字段，該字段用來表示需要重定向到的新位置。301 與 302 都是 HTTP 的狀態碼，都表示某個請求地址發生了重定向。301 重定向表示的是永久重定向（Moved Permanently），表示請求的地址永久性地轉移到另外一個地址，今後任何新的請求都應使用新的地址代替。302 重定向表示的是臨時重定向（Moved Temporarily），表示請求的地址臨時性地轉移到另外一個地址，不改變後續請求的地址。

（圖片來自網絡）

1
2
3
4
5
6
7
8
9
10
const http = require('http')

http
  .createServer((req, res) => {
    res.writeHead(301, { Location: 'http://example.com/' })
    // res.writeHead(302, {'Location': 'http://example.com/'});

    res.end()
  })
  .listen(8080)

註意：客戶端會先判斷狀態碼，只有當狀態碼是 301 或 302 時，客戶端才會根據響應頭中 Location 字段的值進行重定向。

區別

301 重定向與 302 重定向有什麽區別呢？

兩者都表示重定向，其效果都是自動跳轉到一個新的地址。不同在於，301 表示原有地址的資源已經被永久地移除了，其資源無法訪問了，搜索引擎在抓取新地址內容的同時會把原有地址的權重等信息轉移到新的地址，也同時把原有地址的信息從引擎索引庫中徹底廢棄。瀏覽器也不會再緩存原有地址的資源。302 表示臨時重定向，原有地址的資源依舊存在，只是因為特殊原因臨時進行重定向，搜索引擎在抓取新地址內容的同時不會把原有地址的信息從引擎索引庫中徹底廢棄。

應用

301 重定向與 302 重定向分別在什麽場景下應用呢？下面給了一些常見的場景。

使用 301 重定向

  • 原有域名不再使用。比如訪問 www.xiaomi.com（小米官網最早的域名）這個域名，直接重定向到 www.mi.com，此時使用 301 進行重定向。

  • 站點升級了協議（由 http 升級到 https），原協議不再使用（這種情況很少）。

  • 主域名不含 www（https://example.com/）。

使用 302 重定向

  • 站點升級了協議（由 http 升級到 https），原協議依舊使用。

（307 與 302 類似，都表示臨時重定向，只不過 307 為 GET 請求方式重定向。）

  • 網站切換語言。比如訪問 https://www.microsoft.com/（微軟的英文官網）這個域名，服務器判斷用戶當前處於中國大陸地區，直接重定向到 https://www.microsoft.com/zh-cn（微軟的簡體中文官網），此時使用 302 進行重定向。類似的還有根據用戶的設備重定向到 PC 端頁面或者移動端頁面。

  • 用戶登錄信息過期，自動跳轉到登陸界面。

綜上所述，只要原有地址的資源今後不再使用一般用 301 進行重定向，只要是臨時性重定向一般用 302 進行重定向。