cloudflareで静的pageを配信するときのCORSの設定
まとめ
cloudflareのworkers & pagesでCORSを設定するには、レスポンス ヘッダー変換ルールを使うと簡単にできる。
最初に
このblog（https://horiuchi.page、以降blog）は、Astroで作成して、cloudflareのworkers & pagesを使って配信している静的サイトである。私の会社のサイト（https://grikk.co.jp、以降サイト）では、blogが生成した静的なrss.xmlをjavascriptで処理して、blogの更新情報を掲載している。
rss.xmlをサイト側のjavascriptで処理するためには、blogで、CORSの設定をする必要がある。
Access-Control-Allow-Origin: * か、
Access-Control-Allow-Origin: https://grikk.co.jpの設定が必要なる。
先述の通り、サーバーは、cloudflareのworkers & pagesを使っているので、cloudflareのheaderに、CORSを設定する必要がある。
CORSの設定の方法が色々があるが、このblogの場合は、ルール > レスポンスヘッダー変換ルールを使って、リクエストのURIパスを、オペレータをワイルドカードで、/*.xmlに設定して、headerにAccess-Control-Allow-Originに*を設定している。
これで、xmlファイルにアクセスした場合には、Access-Control-Allow-Originを設定したレスポンスを返すようになり、サイト側のjavascriptで、blog側のrssファイルを処理できるようになる。
「ルール」への行き方
ルール設定ページへの遷移方法がいまいち分かりにくい。左側カラムの「クイック検索」に「ルール」といれて、出てきた「ルール」をクリックすると目的のページに遷移できる。
レスポンスヘッダー変換ルールの表示
概要で、「すべてのルールをタイプを表示」を選択して、「レスポンスヘッダー変換ルール」を選択すると、レスポンスヘッダー変換ルールの領域だけが表示される。
設定
このblogでは、次の画像のように設定を行った。
おまけ _headersファイル
_headersファイルを設置して、必要なことを記載しても、レスポンスヘッダーの設定は出来る。Astroで、_headersファイルを設置する場合には、publicディレクトリに_headersファイルを作成して、必要事項を記入すれば、buildしてcloudflareにdeployした時に、有効になるようだ。
xmlファイルにだけ、Access-Control-Allow-Originを設定するには、恐らく次のように書けばよいのだと思われる。
/*.xml
Access-Control-Allow-Origin: *