Enable Cross-Origin Resource Sharing (CORS) for Phaser.js

當你用 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 才行。var game = new Phaser.Game(1000, 650, Phaser.AUTO, ‘game’, {preload: preload, create: create, update: update}) function preload(){ game.load.crossOrigin = “anonymous”; }

注意 game.load.crossOrigin = “anonymous”; 這行要加在其他載入素材的程式碼之前才有效果哦。

此外偷偷補充,每次載入素材都要寫漏漏長的網址,像是這樣的東西看到就想哭對吧。

var game = new Phaser.Game(1000, 650, Phaser.AUTO, 'game', {preload: preload, create: create, update: update});

function preload() {
  game.load.crossOrigin = 'anonymous';

 game.load.tilemap('map', 'http://s.ntustcoding.club/scroll-game-workshop/map.json', null, Phaser.Tilemap.TILED_JSON);
  game.load.image('background_img', 'http://s.ntustcoding.club/scroll-game-workshop/background.png');
}

事實上 Phaser JS 有所謂 base url 的參數可以設定,設定完之後,你可以把程式碼簡化成下面這樣哦。

var game = new Phaser.Game(1000, 650, Phaser.AUTO, 'game', {preload: preload, create: create, update: update});

function preload() {
  game.load.baseURL = 'http://s.ntustcoding.club/scroll-game-workshop/';
  game.load.crossOrigin = 'anonymous';

  game.load.tilemap('map', 'map.json', null, Phaser.Tilemap.TILED_JSON);
  game.load.image('background_img', 'background.png');
}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料