Express URL跳轉（重新導向）的實現

標籤：div   判斷   oca   turn   ring   tool   注意   bsp   asc   

Express是一個基於Node.js實現的Web架構，其響應HTTP請求的response對象中有兩個用於URL跳轉方法res.location()和res.redirect()，使用它們可以實現URL的301或302重新導向。

res.location(path)

res.location(path)

下面列舉了幾種，設定http回應標頭Location的方法

res.location(‘/foo/bar‘);res.location(‘http://example.com‘);res.location(‘back‘);

路徑值back具有特殊的意義，這個涉及到要求標頭Referer中指定的URL，如果Referer頭沒有指定，將會設定為‘/‘。

Express通過Location頭將指定的URL字串傳遞給瀏覽器，它並不會對指定的字串進行驗證（除‘back‘外）。而瀏覽器則負責將當前URL重定義到回應標頭Location中指定的URL。

res.redirect([status,] path)

其中參數：

• status：{Number}，表示要設定的HTTP狀態代碼
• path：{String}，要設定到Location頭中的URL

使用指定的http狀態代碼，重新導向到指定的URL，如果不指定http狀態代碼，使用預設的狀態代碼”302“：”Found“，

res.redirect(‘/foo/bar‘);res.redirect(‘http://example.com‘);res.redirect(301, ‘http://example.com‘);res.redirect(‘../login‘);

重新導向可以是一個完整的URL,這樣會重新導向到一個不同的網站上。

res.redirect(‘http://google.com‘);

重新導向也可以相對於所在主機的根目錄，例如，如果你的程式運行在：http://example.com/admin/post/new上下面的代碼將會重新導向到如下地址：http://example.com/admin

res.redirect(‘/admin‘);

重新導向也可以相對於當前的URL，例如：從http://example.com/blog/admin/這個地址（注意反斜線），下面的代碼將會重新導向到地址：http://example.com/blog/admin/post/new

res.redirect(‘post/new‘)

在從地址： http://example.com/blog/admin重新導向到 post/new，如果沒有反斜線的話將會重新導向到：http://example.com/blog/post/new

如果你感覺上面的行為很迷惑，想想檔案目錄和檔案的路徑，這會讓你更好理解。

相對路徑的重新導向也是允許的，如果你的地址是： http://example.com/admin/post/new，下面的代碼將會重新導向到http//example.com/admin/post這個地址：

res.redirect(‘..‘);

back重新導向，重新導向到請求的referer，當沒有referer要求標頭的情況下，預設為‘/’


res.redirect(‘back‘); 

URL重新導向原理

進行URL重新導向時，伺服器只在響應資訊的HTTP頭資訊中設定了HTTP狀態代碼和Location頭資訊。

當狀態代碼為301或302時（301－永久重新導向、302－臨時重新導向），表示資源位置發生了改變，需要進行重新導向。

Location頭資訊表示了資源的改變的位置，即：要跳重新導向的URL。

 

location()與 redirect()的比較

Express的response對象，是對Node.js原生對象ServerResponse的擴充。location()方法只會設定Location頭，而redirect()方法除了會設定Location頭外還可自動或手頭設定HTTP狀態代碼。理論上講兩者可以實現重新導向。

location()方法實現過程大致如下：

res.location = function(url){  var req = this.req;  // "back" 是 referrer的別名  if (‘back‘ == url) url = req.get(‘Referrer‘) || ‘/‘;  // 設定Lcation  this.setHeader(‘Location‘, url);  return this;};

從以上代碼可以看出，location()方法本質上是調用了ServerResponse對象的setHeader()方法，但並沒有設定狀態代碼。通過location()設定頭資訊後，其後的代碼還會執行。

使用location()方法實現URL的重新導向，還要手動設定HTTP狀態代碼：

res.location(‘http://itbilu.com‘);res.statusCode = 301;

如果需要立即返迴響應資訊，還要調用end()方法：

res.location(‘http://itbilu.com‘);res.statusCode = 301;res.end(‘響應的內容‘);// 或res.location(‘http://itbilu.com‘);res.sent(302);

redirect()方法實現過程大致如下：

res.redirect = function(url){  var head = ‘HEAD‘ == this.req.method;  var status = 302;  var body;  // 一些處理  ……  // 通過 location 方法設定頭資訊  this.location(url);    // 另一些處理  ……  // 設定狀態並返迴響應  this.statusCode = status;  this.set(‘Content-Length‘, Buffer.byteLength(body));  this.end(head ? null : body);};

從以上代碼可以看出，redirect()方法是對location()方法的擴充。通過location()設定Loction頭後，設定HTTP狀態代碼，最後通過ServerResponse對象的end()方法返迴響應資訊。調用redirect()方法後，其後的代碼都不會被執行

重新導向與不重新導向

在使用的過程中，redirect()方法大多能重新導向成功，而location()方法則不太確定，有時可以成功有時不能成功。這與我們的用法有關。

上面講過，URL重新導向是在瀏覽器端完成的，而URL重新導向與HTTP狀態代碼和Location頭有關。瀏覽器首先會判斷狀態代碼，只有當狀態代碼是：301或302時，才會根據Location頭中的URL進行跳轉。

所以，使用location()設定頭資訊，而不設定狀態代碼或狀態代碼不是301或302，並不會發生重新導向：

res.location(‘http://itbilu.com‘);res.sent(200);

而使用redirect()設定的狀態代碼不是301或302也不會發生跳轉：

res.redirect(200, ‘http://itbilu.com‘);

 

參考：

1、http://itbilu.com

2、http://www.expressjs.com.cn/4x/api.html#res.location

Express URL跳轉（重新導向）的實現