Question

我正在完成一个Facebook即时游戏，我有这个API https://seustestes.com/api，我将提供所有游戏数据。我目前正在本地主机上加载游戏，并且运行正常：

$.ajax({
    type: 'GET',
    url: api,
    success: function (data) {
        games = data;
        for (var k in games) {
            $('#container').append('<div class="card" style="width: 18rem;"> <img src="' + games[k].cover + '" class="card-img-top img-responsive"> <div class="card-body"> <h5 class="card-title">' + games[k].name + '</h5> <p class="card-text">' + games[k].title + '</p><button id="botao' + k + '" onClick="callTest(\'' + games[k].token + '\', \'Marciel\')" class="btn btn-primary">Jogar</button></div></div>');
        }
    }

});

但是当我将游戏上传到Facebook并加载时，它不会加载显示以下错误的封面图像：

拒绝加载图片“ http://18.219.0.84/img/simple/81e3c777bba96ec9c03085d9a93c3e70259c9d39d773b9de40c07517f5968149/cover.png”，因为它违反了以下内容安全政策指令：“ img-src'self'blob：数据：* .facebook.com * .fbcdn.net * .google- analytics.com stats.g.doubleclick.net * .akamaihd.net * .giphy.com * .cloudfront.net * .amazonaws.com * .tenor.com * .googleapis.com * .firebaseapp.com * .firebaseio.com * .8686c.com * .cncovs.com * .aliyun.com * .aliyuncs.com * .wsdvs.com * .console.re * .akamaized.net * .kunlunar.com * .layabox.com * .windows.net * .msecnd.net * .anysdk.com Usage.trackjs.com platform-lookaside.fbsbx.com * .cocos.com * .playfab.com * .hinet.net * .cloudinary.com * .imgur.com * .myqcloud .com * .tencentcs.com“。

起初，我以为这些域是唯一允许从中加载图像的域，但是后来我检查了其他游戏，它们从各种域中加载了图像，因此我认为这与我的目标有关。

我的API已经允许使用CORS。我有点卡在这里。

Answer 1

即时游戏内容安全策略不允许您通过img标签加载任意图像。如果您坚持使用blob标签，则可以改用img协议，或者最好使用canvas绘图API来绘制图像。

Answer 2

尝试为图像标签设置crossOrigin = "Anonymous"属性。您也可以使用drawImage()的画布。下载图像并将其转换为FBInstant.shareAsync用作有效负载的base64代码的示例代码：

var image = new Image();
    image.crossOrigin = "Anonymous"; // img.cors must be after new Image()
    image.src = "cross origin photo url here"; //src initiates download
    image.addEventListener('load', function() {
        ctx.save();
        ctx.drawImage(image,25,25, 256,256, 135,110, 128,128);
        ctx.restore();
        base64Image = canvas.toDataURL();
    });

有关MDN文档here的更多详细信息。仅供参考：我创建了一个即时画布绘制图像，该图像动态获取了玩家的个人资料照片，姓名和游戏分数，以便在即时游戏过程中在Messenger线程中共享为base64图像。我遇到了相同的CORS问题，但解决了该问题，并且现在可以在实时模式下工作。

Facebook Instant游戏不允许加载我的API图像

2 个答案: