0

我正在完成一个 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: 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 *.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。我有点卡在这里。

4

2 回答 2

0

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

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 文档的更多细节在这里。仅供参考：我创建了一个动态画布绘图图像，该图像动态获取玩家的个人资料照片、姓名和游戏分数，以在即时游戏过程中作为 base64 图像在信使线程中共享。我遇到了同样的 CORS 问题，但解决了它，现在它正在使用实时模式。

于 2019-01-15T13:12:17.923 回答
0

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

于 2019-01-11T18:43:00.143 回答