CloudflareでのCORS問題を解決する

公開日:2018-11-13
最終更新:2018-11-13

負荷分散のためにcssやjsファイル、あるいはロゴ画像などを別サーバーから配信することはけっこうありますね。
攻城団でもこうした静的ファイルは別サーバーに置いて、さらにCloudflare経由で配信しています(漫画村で悪目立ちしましたが、Cloudflareは便利ですよ)。

ただしDNSの設定をめんどくさがって、

  • 通常のサービス:kojodan.jp
  • 静的ファイルの配信:kojodan.com

とドメインをわけています。 CloudflareはDNSごと丸投げする前提のサービスですが、うちは基本的にAWSは使ってないもののDNSだけはAmazon Route 53を使っているので、移行をめんどくさがってわけちゃいました。

すると当然のようにCORS(Cross-Origin Resource Sharing)のエラーが出る

Chromeのデベロッパーツールなどで表示すると以下のようなメッセージが表示されます。

Access to fetch at 'https://kojodan.com/js/merge.min.js' from origin 'https://kojodan.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

これは「オリジナル(kojodan.jp)と異なるドメインからリソースを呼び出そうとしてるけど大丈夫なんか?」というエラーです。
解決方法として、Access-Control-Allow-Originというヘッダーを追加すればいいのですが、Cloudflareも対応しています。

Why can't I see my CORS headers? Cloudflare Support

読むと、「元のサーバーでちゃんと設定してれば反映するぞ」と書いてあるので、kojodan.comの裏側にいるWebサーバー(さくらのVSP)の.htaccessに以下の記述を追加しました。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</IfModule>

そのあとCloudflareの管理画面から「Purge Everything」でいったん全キャッシュをクリアして、再読込すればさっきのアラートは消えます。
(PCならスーパーリロード、スマホなら端末側のキャッシュの削除をしないといけないかも)

HTTPS対応もそうですが、とりあえず問題なく表示されてればいいやと思ってると「安全じゃない」とか利用者に警告が表示されちゃうのはマズいのでこのへんはできるだけ対処しておきたいですね。

記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@kojodanの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする