目次
Cloudflare Pagesの_headersを使用するとどうなるのか？
HTTPのヘッダーをレスポンスに設定することができる。
配置場所
ビルド出力ディレクトリの直下に配置する。
例
ビルド出力ディレクトリが/publicの場合、/public/_headersに配置する。
Git管理している際の注意点
Cloudflare側でビルドをする場合、.gitignoreに_headersを追加していると、Cloudflare側でヘッダーが設定されない。
.gitignoreの一例
ビルド出力先ディレクトリをpublicとした場合の.gitignoreの例。
public/*
!public/_headers!で_headersを除外している。
Cloudflare Pages _headersの書き方
基本構文
[url]
[name]: [value]例
ディレクトリ構成
📁/
┣📁path1
┃ ┗📁to
┃ ┗📃file1.md
┃
┣📁path2
┃ ┗📃file2.txt
┃
┣📁path3
┃ ┗📃file3.txt
┃
┗📃index.html_headers
/*
X-Frame-Options: DENY
X-Robots-Tag: noindex
/path1/to/*
! X-Frame-Options
/path2/*
Referrer-Policy: no-referrer
/path3/*
Access-Control-Allow-Origin: *結果
| アクセス先 | ヘッダー |
|---|---|
| /index.html | X-Frame-Options: DENYX-Robots-Tag: noindex |
| /path1/to/file1.md | X-Robots-Tag: noindex |
| /path2/file2.txt | X-Frame-Options: DENYX-Robots-Tag: noindexReferrer-Policy: no-referrer |
| /path3/file3.txt | X-Frame-Options: DENYX-Robots-Tag: noindexAccess-Control-Allow-Origin: * |
!（エクスクラメーション）
!を使用することで、ヘッダーを削除することができる。
/*
X-Frame-Options: DENY
X-Robots-Tag: noindex
/path1/to/*
! X-Frame-Optionsとしていたが、/path1/to/*にアクセスした場合、X-Frame-Optionsが削除される。
使用できるヘッダー例
| ヘッダー名 | 説明 |
|---|---|
| X-Frame-Options | フレームの表示を制御する |
| X-Robots-Tag | 検索エンジンのクローラーに対して、ページのインデックスを許可するかどうかを制御する |
| Referrer-Policy | リファラー情報の送信を制御する |
| Access-Control-Allow-Origin | クロスオリジンリソースのアクセスを許可する |
| X-Content-Type-Options | ブラウザがMIMEタイプをスニッフィングしないようにする |
| Content-Security-Policy | コンテンツの読み込み元を制御する |
などがある。
ワイルドカード
*を使用することで、ワイルドカードを使用することができる。