CORS

With Cross-Origin Resource Sharing (hereafter CORS) settings, JavaScript can get past the browser’s same-origin policy and access resources (APIs) on other domains. But every time I set up CORS, I have a headache working out whether the server was really configured successfully. Sometimes the browser caches CORS results, so even when the server is configured correctly, the request keeps failing no matter how many times you refresh the page. Here I will show you how to use cURL to inspect the headers directly and check whether CORS is enabled! ...

When you load resources and assets from a different domain in Phaser JS, the browser’s same-origin policy blocks them, and you get a pile of error messages, such as: 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. Actually, Phaser itself supports Cross-Origin Resource Sharing (CORS). You can solve this with one simple line, as long as the web hosting you use also supports CORS....

Recently I’ve been teaching a club class how to build small games with Phaser. Many of the assets need to be used by students on CodePen, so I needed web storage that supports CORS to host them. As I was brainstorming, I thought of Google Cloud Storage: it’s cheap, and you can bind it to your own domain! By default, Google Cloud Storage doesn’t support Cross-Origin Resource Sharing (CORS). But you can enable CORS on a specific bucket with gsutil (the Google Cloud Storage CLI tool)! ...