@kojodanの技術ブログ

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

この記事へのコメント

まだコメントはありません