Мгновенные игры Facebook не позволяют загружать мои изображения API

Question

Я заканчиваю мгновенную игру на фейсбуке, и у меня есть этот API https://seustestes.com/api которому я добавлю все данные игр. Я сейчас загружаю игры на localhost, и все работает нормально:

$.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" data: blo * self * blob. *.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 Использование.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 тег, или предпочтительно использовать API рисования холста для рисования изображений.

Answer 2

Попробуйте установить crossOrigin = "Anonymous" атрибут вашего тега изображения. Также вы можете использовать drawImage() холста. Пример кода, который загружает изображение и преобразует его в код base64, используемый 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 документации здесь. К вашему сведению: я создал изображение холста на лету, которое динамически получает фотографию профиля игрока, его имя и игровую оценку, чтобы поделиться ими в виде изображения base64 в потоке мессенджера во время мгновенной игры. Я столкнулся с той же проблемой CORS, но решил ее, и теперь она работает в живом режиме.