Cloudflare WorkersでCookieを使う方法

CookieをHTTPヘッダから取得する

CookieはHTTPヘッダで送信されてくるので、そちらをCloudflare Workersで読み取ります。Cloudflare Workersでは、「request」オブジェクトにWeb APIのheadersオブジェクトが収容されているので、getメソッドで取得可能です。

Request | Cloudflare Workers

const cookieString = request.headers.get("Cookie")

Cookieを分解する

HTTPヘッダーのCookie情報は、「xxx = yyy」という文字列で収容されているので、そちらを検索しやすいように連想配列に変換します。

使いやすいように関数にしました。

function getCookie(request, name) {
  let result = ""
  const cookieString = request.headers.get("Cookie")
  if (cookieString) {
    const cookies = cookieString.split(";")
    cookies.forEach(cookie => {
      const cookiePair = cookie.split("=", 2)
      const cookieName = cookiePair[0].trim()
      if (cookieName === name) {
        const cookieVal = cookiePair[1]
        result = cookieVal
      }
    })
  }
  return result
}

あとは、Cloudflareの実際の処理を書く「handleRequest」で「getCookie」関数を呼び出します。

async function handleRequest(request) {
  const COOKIE_NAME = "hogehoge"
  const cookie = getCookie(request, COOKIE_NAME);

  if (cookie) {
  // 何かの処理
  }else{
  // 何かの処理
  }  
}

こんな感じでCookieの値によって処理を分割できます。

Netlifyなどの静的サイト・ホスティングだと、通常のApache・NginxのWebサーバーのようにCookieの値によって処理を分割できないので、Cloudflare Workersに任せてしまえば、サーバーレスでレンタルサーバーやVPSと同じようなことができてしまいますね。