Facebook即时游戏不允许加载我的API映像

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 'self’blob: data：*.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 *.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平台-lookaside.fbsbx.com *.cocos.com *.playfab.com *.hinet.net *.cloudinary.com *.imgur.com *.myqcloud.com *.tencentcs.com“。

一开始我以为那些域是唯一允许加载图像的域，但后来我检查了其他游戏，它们从所有类型的域加载图像，所以我想这与我的结束有关。

我的API已经允许CORS了。我被困在这里了。

Answer 1

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

Answer 2

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

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文档这里。FYI:我创建了一个动态获取玩家个人资料照片、名字和游戏核心的动态画布图像，在即时游戏中作为base64图片在信使线程中共享。我经历了同样的CORS问题，但解决了它，它现在正在运行模式。