Cross-Origin Resource Sharing（以下 CORS）を設定すると、JavaScript はブラウザの同一オリジンポリシーを回避して、別のドメインのリソース（API）にアクセスできるようになります。ただ、CORS を設定するたびに、サーバーが本当に正しく設定されたかどうかを判断するのに頭を悩ませます。ブラウザが CORS の結果をキャッシュすることがあり、そのためサーバーの設定に問題がなくても、ページを何度再読み込みしても失敗し続けることがあるからです。ここでは cURL を使って header を直接確認し、CORS が有効になっているかどうかを調べる方法をご紹介します！ ...
Phaser JS で別のドメインにあるリソースや素材を読み込もうとすると、ブラウザの同一生成元ポリシーにブロックされ、次のようなエラーメッセージがいくつも表示されます。 XMLHttpRequest cannot load http://s.ntustcoding.club/scroll-game-workshop/map.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. 実は、Phaser 自体がクロスオリジンリソース共有（CORS）に対応しており、簡単な一行を書くだけで解決できます。ただし、利用しているホスティングサービスも CORS に対応している必要があります。...
最近、サークルの授業で Phaser を使った小さなゲームの作り方を教えているのですが、受講生が CodePen で使う素材がたくさんあります。そのため、素材を置くのに CORS に対応したストレージが必要になりました。いろいろ考えているうちに、安く、しかも自分のドメインを紐付けられる Google Cloud Storage を思いつきました！ Google Cloud Storage は、初期設定では Cross-Origin Resource Sharing（CORS）に対応していません。ただし、gsutil（Google Cloud Storage の CLI ツール）を使えば、指定したバケットで CORS を有効にできます！ ...