iT邦幫忙

2025 iThome 鐵人賽
DAY 20
0
Modern Web

Learn HTTP With JS系列 第 20 篇

HTTP redirections

17th鐵人賽
109 瀏覽

  • 分享至 

  • xImage
    •  

前言

一直沒有很深入了解 3xx Status Code 有哪些，各代表什麼含意，就趁這篇文章把它搞懂吧！

Permanent redirections

  • 代表原本的網址已經不再使用了
  • 例如，網站搬家，從 old.example.com 搬到 new.example.com
  • 搜尋引擎爬蟲收到 Permanent redirections 之後，，會將轉導的 URL 記錄下來（原網站的 SEO 會指到新網站）
  • 預設會被快取
  • 根據 RFC7231 的建議
The server's response payload usually contains a short hypertext note with a hyperlink to the new URI(s).

301 Moved Permanently

  • 轉導的 HTTP Request 統一用 GET METHOD 來做導轉，若有 Body 會被捨棄

我們使用 NodeJS HTTP Server 實作（但我們不按照 RFC7231 的建議）

import httpServer from "../httpServer";
import { faviconListener } from "../listeners/faviconListener";
import { notFoundListener } from "../listeners/notFoundlistener";

httpServer.on("request", function requestListener(req, res) {
  if (req.url === "/favicon.ico") return faviconListener(req, res);
  // 轉導後的目標網址，回傳 { method, body }
  if (req.url === "/") {
    const chunks: Buffer[] = [];
    req.on("data", (chunk) => {
      chunks.push(chunk);
    });
    req.on("end", () => {
      res.setHeader("Content-Type", "application/json");
      res.end(
        JSON.stringify({
          method: req.method,
          body: Buffer.concat(chunks).toString(),
        }),
      );
      return;
    });
    return;
  }
  if (req.url === "/301") {
    res.statusCode = 301;
    res.setHeader("location", "http://localhost:5000");
    res.end();
    return;
  }
  return notFoundListener(req, res);
});

先用瀏覽器打開 http://localhost:5000/301 做個簡單的 GET 請求
301-get

再來用 fetch 做個 Post + Body 的請求

fetch("http://localhost:5000/301", {
  method: "POST",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

轉導的 HTTP Request 確實變成 GET，且 Body 被捨棄
301-post

308 Permanent Redirect

  • 轉導的 HTTP Request Method 跟 Body 不變
  • 使用古老 <form method="POST" action="http://localhost:5000/308"> 技術的網站，若網站網址更動，就會需要用到 308，而不是 301，也算是為了向後兼容（backward compatibility）

新增以下 NodeJS 程式碼

if (req.url === "/308") {
  res.statusCode = 308;
  res.setHeader("location", "http://localhost:5000");
  res.end();
  return;
}

再來用 fetch 做個 Post + Body 的請求

fetch("http://localhost:5000/308", {
  method: "POST",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

轉導的 HTTP Request Method 跟 Body 確實不變
308-post

Temporary redirections

  • 搜尋引擎爬蟲收到 Temporary redirections 之後，不會將轉導的 URL 記錄下來（意思就是原本網站的搜尋引擎排名不會被影響）

302 Found

Note: For historical reasons, a user agent MAY change the request method from POST to GET for the subsequent request.

GET methods unchanged. Others may or may not be changed to GET.

12. If one of the following is true
- internalResponse’s status is 301 or 302 and request’s method is `POST`
- internalResponse’s status is 303 and request’s method is not `GET` or `HEAD`
  then:
    Set request’s method to `GET` and request’s body to null.
    For each headerName of [request-body-header] name, delete headerName from request’s header list.

request-body-header

A request-body-header name is a header name that is a byte-case-insensitive match for one of:

`Content-Encoding`
`Content-Language`
`Content-Location`
`Content-Type`
  • 我的建議，根據不同情況使用 303 跟 307

新增以下 NodeJS 程式碼

if (req.url === "/302") {
  res.statusCode = 302;
  res.setHeader("location", "http://localhost:5000");
  res.end();
  return;
}

先用瀏覽器打開 http://localhost:5000/302 做個簡單的 GET 請求，確認 GET 請求維持不變
302-get

再來用 fetch 做個 Post + Body 的請求

fetch("http://localhost:5000/302", {
  method: "POST",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

確實轉為 GET + 清空 Body 了
302-post

繼續試試看用 fetch 做個 PUT + Body 的請求

fetch("http://localhost:5000/302", {
  method: "PUT",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

保持原本的 Request Method + Body
302-put302-put

303 See Other

  • 轉導的 HTTP Request 統一用 GET METHOD 來做導轉，若有 Body 會被捨棄，同 301 的行為
  • 使用情境： 用戶訂閱電子報 <form method="POST" action="http://localhost:5000/subscribeEDM"> 後，使用 303 將用戶導到其他頁面（好像蠻合理的，但實務上我沒看過有網站這樣做）

新增以下 NodeJS 程式碼

if (req.url === "/303") {
  res.statusCode = 303;
  res.setHeader("location", "http://localhost:5000");
  res.end();
  return;
}

再來用 fetch 做個 Post + Body 的請求

fetch("http://localhost:5000/303", {
  method: "POST",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

轉導的 HTTP Request 確實變成 GET，且 Body 被捨棄
303-post.jpg

307 Temporary Redirect

  • 轉導的 HTTP Request Method 跟 Body 不變，，同 308 的行為

新增以下 NodeJS 程式碼

if (req.url === "/307") {
  res.statusCode = 307;
  res.setHeader("location", "http://localhost:5000");
  res.end();
  return;
}

再來用 fetch 做個 Post + Body 的請求

fetch("http://localhost:5000/307", {
  method: "POST",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

轉導的 HTTP Request 確實變成 GET，且 Body 被捨棄
307-post.jpg

3xx with no Location

如果回傳 3xx，但沒有 Location Header，會發生什麼事情呢？

新增以下 NodeJS 程式碼

if (req.url === "/301-with-no-location") {
  res.statusCode = 301;
  res.end();
  return;
}

用瀏覽器打開 http://localhost:5000/301-with-no-location 做個簡單的 GET 請求，沒有噴錯誤訊息，一切平安
301-with-no-location

non 3xx with location

如果回傳 200 + Location Header，會發生什麼事情呢？

新增以下 NodeJS 程式碼

if (req.url === "/200-with-location") {
  res.statusCode = 200;
  res.setHeader("location", "http://localhost:5000");
  res.end();
  return;
}

用瀏覽器打開 http://localhost:5000/200-with-location 做個簡單的 GET 請求，沒有轉導
200-with-location

我推測瀏覽器會去判斷特定 status code 搭配 location response header 才會轉導，參考 MDN 文件 的描述

Status responses including a Location header: 201, 301, 302, 303, 307, 308.

使用 201 看看，新增以下 NodeJS 程式碼

if (req.url === "/201") {
  res.statusCode = 201;
  res.setHeader("location", "http://localhost:5000");
  res.end();
  return;
}

用瀏覽器打開 http://localhost:5000/201 做個簡單的 GET 請求，沒有成功轉導QQ
201-get

由於 201 Created 通常用在 POST 請求新增資源，所以我們換成 POST + Null Body 試試看：

fetch("http://localhost:5000/201", {
  method: "POST",
  redirect: "follow",
})
  .then((res) => res.text())
  .then((body) => console.log(body));

還是沒有轉導
201-post-null-body

加個 Body 試試看：

fetch("http://localhost:5000/201", {
  method: "POST",
  body: "hello-world",
  redirect: "follow",
  headers: { "Content-Type": "text/plain" },
})
  .then((res) => res.text())
  .then((body) => console.log(body));

還是沒有轉導
201-post-body

為何 201 搭配 Location 沒有轉導呢？根據 MDN 文件 跟 RFC9110 的描述，都沒有特別提到 201 + Location "可以用來被轉導"，RFC 針對上述 3xx status code 的用詞常常會出現

The user agent MAY use the Location field value for automatic redirection.

其中蠻有趣的，大寫的 MAY，還有專門一篇 RFC2119 來描述每個 Keyword 的意義，節錄 MAY 的部分描述：

MAY
This word, or the adjective "OPTIONAL", mean that an item is
truly optional.

結論：RFC 沒有明確禁止 HTTP Client 在 201 的時候使用 Location Header 轉導，但也沒有說 MAY use the Location field value for automatic redirection，實務上我沒看過 201 會轉導的，在 Response Body 回傳新建立的資源是比較常見的做法

小結

這篇文章，帶大家理解 301, 302, 303, 307, 308 redirect 的差異，也介紹了 201 這個特殊的情境，我自己也學到了很多～

參考資料


上一篇
Upgrade
下一篇
HTTP Request Methods (上篇)
系列文
Learn HTTP With JS 共 30 篇
  1. 26
    Cross-Origin Resource Sharing (CORS) 下篇
  2. 27
    beyond CORS
  3. 28
    HTTP caching (第一篇)
  4. 29
    HTTP caching (第二篇)
  5. 30
    HTTP caching (第三篇)
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
413 組
團體組數
14 組
累計文章數
3013 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 17th鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙