[Day1] 用Workers做whoami網站，顯示Request資訊 — 30天實戰Cloudflare

上一個系列介紹完Cloudflare各種常見的功能，我們接著來了解到Cloudflare實作哪些功能，本篇會先介紹到如何使用Workers做一個類似whoami的網站，來顯示Client的Request資訊。

功能效果#

效果會如下，可以呈現出Request Header、Body等資訊，另外Cloudflare也提供除了Request以外的使用者資訊，如：IP、國家、時區、座標等。

其中Cloudflare資訊只能夠在Workers中取得相關資訊，不會丟到後端的原點伺服器，原點伺服器只能取得Request的Header、Body。如果希望在伺服器能夠取得使用者資訊，可以到「規則」、「轉換規則」、「受控轉換」中，勾選要HTTP請求標頭，以此來取得使用者IP與其他資訊。

程式範例#

參考之前Workers的基本教學，我們建立一個專案，並複製貼上範例程式碼，程式碼如下：

1
export default {
2
  async fetch(request, env) {
3
    let result = "";
4

5
    // 取得Cloudflare參數
6
    result = request.method + " " + request.url + "\n";
7
    result += "\nCLOUDFLARE\n---\n";
8
    for (const [key, value] of Object.entries(request.cf)) {
9
      var v = JSON.stringify(value);
10
      result += `${key}: ${v}\n`;
11
    }
12

13
    // 取得Request Header
14
    result += "\nHEADER\n---\n";
15
    const headers = Object.fromEntries(request.headers);
16
    for (const [key, value] of Object.entries(headers)) {
17
        result += `${key}: ${value}\n`;
18
    }
19

20
    // 取得Request Body
21
    result += "\nBODY\n---\n";
22
    result += await request.text();
23
    return new Response(result);
24
  }
25
}

我們這邊功能有三段，第一段讀取Cloudflare中使用者的參數，並把它全部列出來，這裡使用request.cf的參數，可以參考官方文件看看有哪些資訊可以取得。第二段我們使用request.headers取得使用者過來的所有標頭資訊。第三段使用await request.text()取得使用者的body資訊。

再來到Workers提供的網址，就可以瀏覽這個我們撰寫的程式。我們也可以另外將自己的網域設定上去，在自訂網域中新增即可，我這邊範例以whoami.twcanhelp.me為例。

結語#

透過以上方式我們可以簡單實作一個取的Request Header、Body的工具，如果不想自建，也可以考慮使用現成的工具如Beeceptor。