使用Phaser3.60开发Facebook可玩广告遇XMLHttpRequest拦截问题求助

完全绕开Phaser加载器的原生加载方法 #

直接用原生HTMLImageElement加载图片，彻底避开Phaser内置加载器的XHR逻辑：

• 先通过原生API加载图片，完成后再注入Phaser的纹理系统

// 封装原生图片加载函数
function loadNativeImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // Facebook环境下跨域必须设置
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

// 在Phaser场景中使用
class GameScene extends Phaser.Scene {
  async preload() {
    // 跳过Phaser loader，用原生加载
    this.nativeImage = await loadNativeImage('assets/player.png');
  }

  create() {
    // 将原生图片转为Phaser纹理
    this.textures.addImage('player', this.nativeImage);
    // 正常创建精灵
    this.add.sprite(400, 300, 'player');
  }
}

关于imageLoadType设置无效的排查 #

你设置imageLoadType: "HTMLImageElement"后仍报错，大概率是这两个原因：

1. Phaser 3.60的音频加载逻辑依旧依赖XHR，Facebook的拦截可能是针对音频请求触发的
2. Facebook的检测规则可能扫描了Phaser.min.js中的XHR代码特征，哪怕你没实际调用，也会触发拦截

额外适配技巧 #

• 音频也可以用原生HTMLAudioElement加载，逻辑和图片类似：

function loadNativeAudio(src) {
  return new Promise((resolve, reject) => {
    const audio = new Audio();
    audio.crossOrigin = 'anonymous';
    audio.addEventListener('canplaythrough', () => resolve(audio));
    audio.addEventListener('error', reject);
    audio.src = src;
  });
}

• 对Phaser源码和你的游戏代码做混淆压缩，避免Facebook检测到XHR相关的特征字符串
• 确保资源用相对路径或Facebook白名单内的CDN地址，减少跨域相关的拦截风险

内容的提问来源于stack exchange，提问作者a_7md.f