目錄

1. 測試響應(yīng)碼302
2. 更改響應(yīng)碼后，測試瀏覽器是否仍會跳轉(zhuǎn)
3. 測試響應(yīng)碼301
4. 測試301的永久存儲

0. 概述

1. 跳轉(zhuǎn)的狀態(tài)碼通常使用302和301。
2. 302是臨時跳轉(zhuǎn)，瀏覽器不會對頁面進行緩存，意味著每次都會請求兩次后端。
3. 301是永久跳轉(zhuǎn)，瀏覽器第一次會請求兩次后端，然后將永久跳轉(zhuǎn)的頁面緩存，時間盡可能的長。（慎用301響應(yīng)碼，因為這個操作是不可由開發(fā)人員更改的，如果用戶不清理瀏覽器緩存，用戶永遠(yuǎn)會訪問第一次設(shè)定的url）。
4. 跳轉(zhuǎn)使用的響應(yīng)頭的參數(shù)為Location

1. 測試響應(yīng)碼302

• 代碼

1. 如果路由是/，則設(shè)置Location參數(shù)進行跳轉(zhuǎn)。
2. 如果路由是/redirect，則返回字符串。

/**
 * 使用302狀態(tài)碼測試臨時重定向
 */
const http = require('http')
const port = 9000

http.createServer(function(request, response) {
  switch(request.url) {
    // 使用Location
    case '/': {
      response.writeHead(302, {
        'Content-Type': 'text/plain',
        'Location': 'redirect'
      })
      response.end('It is root')
      break
    }
    case '/redirect': {
      response.writeHead(200, {
        'Content-Type': 'text/plain'
      })
      response.end('It is redirect')
      break
    }
  }
}).listen(port)

console.log(`listen ${port}`)

• 測試

1. 輸入根目錄localhost:9000/
   

2. 更改響應(yīng)碼后，測試瀏覽器是否仍會跳轉(zhuǎn)

• 代碼

1. 將根路由中的響應(yīng)碼更改為200

case '/': {
  // 測試2: 200時的代碼
  response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Location': 'redirect'
  })

  response.end('It is root')
  break
}

• 測試

1. 響應(yīng)碼變?yōu)?00，仍有Location參數(shù)

   
   

2. 但是不再進行跳轉(zhuǎn)，所以Location需要與響應(yīng)碼配合使用，才能完成跳轉(zhuǎn)。
   

3. 測試響應(yīng)碼301

• 更改響應(yīng)碼為301

case '/': {
  // 測試1: 301時的代碼
  response.writeHead(301, {
    'Content-Type': 'text/plain',
    'Location': 'redirect'
  })

  response.end('It is root')
  break
}

• 測試

1. 現(xiàn)在響應(yīng)碼變?yōu)榱?01，第一次仍會請求兩次

   
   

2. 第二次則直接從緩存中獲取根目錄了

   
   

4. 測試301的永久存儲

• 修改代碼

1. 訪問根路由不再進行跳轉(zhuǎn)

case '/': {
  // 測試2: 不重定向的代碼
  response.writeHead(200, {
    'Content-Type': 'text/plain',
  })

  response.end('It is root')
  break
}

• 測試

1. 瀏覽器仍進行了跳轉(zhuǎn)

   
   

2. 清楚瀏覽器緩存后，不再進行跳轉(zhuǎn)