カスタムHTTPヘッダーの追加

より高度なHTTPヘッダーのカスタマイズは、Cloudflare Workersのサーバーレス関数 ↗を通じて利用可能です。

以前にWorkerをデプロイしたことがない場合は、チュートリアルから始めてください。このチュートリアルの目的のために、ステップ1（Workersアカウントにサインアップ）からステップ4（新しいプロジェクトを生成）を完了してから、このページに戻ってください。

続行する前に、Cloudflare Pagesプロジェクトがカスタムドメインに接続されていることを確認してください。

Workers関数の作成

Workers関数はJavaScript ↗で記述されます。WorkerがCloudflare Pagesアプリケーションにリクエストを送信すると、レスポンスを受け取ります。Workerが受け取るレスポンスは不変であり、変更することはできません。ヘッダーを追加、削除、または変更するには、レスポンスをクローンし、新しいResponseインスタンスでヘッダーを修正します。希望するヘッダーの変更を加えた新しいレスポンスをブラウザに返します。以下にその例を示します。

export default {
  async fetch(request) {
    // このスクリプトがPagesプロジェクトと同じカスタムドメインにデプロイされている場合、Pagesアプリケーションをプロキシします
    const response = await fetch(request);

    // レスポンスをクローンして不変でなくします
    const newResponse = new Response(response.body, response);

    // 値を持つカスタムヘッダーを追加
    newResponse.headers.append(
      "x-workers-hello",
      "Cloudflare Workersからのこんにちは",
    );

    // ヘッダーを削除
    newResponse.headers.delete("x-header-to-delete");
    newResponse.headers.delete("x-header2-to-delete");

    // 既存のヘッダーの値を調整
    newResponse.headers.set("x-header-to-change", "NewValue");

    return newResponse;
  },
};

ダッシュボードでのWorkers関数のデプロイ

Workers関数のデプロイを開始する最も簡単な方法は、ブラウザでworkers.new ↗と入力することです。アカウントにログインすると、自動的にWorkers & Pagesダッシュボードに移動します。Workers & Pagesダッシュボードから、関数を記述するか、Workersドキュメントの例のいずれかを使用します。

スクリプトが準備できたら、保存してデプロイを選択し、ドメインのゾーン設定でルートを設定します。

たとえば、こちらのWorkersスクリプトをコピーしてWorkersダッシュボードに貼り付けると、リクエストがPages URLに到達するたびに、X-XSS-Protection、X-Frame-Options、X-Content-Type-Options、Strict-Transport-Security、Content-Security-Policy (CSP)などの一般的なセキュリティヘッダーが設定されます。

CLIを使用したWorkers関数のデプロイ

このファイルを自分で記述するのをスキップしたい場合は、custom-headers-example テンプレート ↗を使用して、wranglerというWorkers CLIツールで新しいWorkers関数を生成できます。

git clone https://github.com/cloudflare/custom-headers-example
cd custom-headers-example
npm install

Pagesアプリケーションと一緒にWorkers関数を操作するには、Pagesアプリケーションと同じカスタムドメインにデプロイします。そのためには、プロジェクト内のwrangler.tomlファイルをアカウントとゾーンの詳細で更新します。

name = "custom-headers-example"

account_id = "FILL-IN-YOUR-ACCOUNT-ID"
workers_dev = false
route = "FILL-IN-YOUR-WEBSITE.com/*"
zone_id = "FILL-IN-YOUR-ZONE-ID"

アカウントIDとゾーンIDの見つけ方がわからない場合は、ガイドを参照してください。

wrangler.tomlを設定したら、ターミナルでnpx wrangler deployを実行してWorkerをデプロイします。

npx wrangler deploy

Workerをデプロイした後、希望するHTTPヘッダーの調整が適用されます。Workerがデプロイされている間、Pagesアプリケーションのコンテンツは通常通り表示されるはずです。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings