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

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

0 голосов
/ 11 января 2019

Я заканчиваю мгновенную игру на фейсбуке, и у меня есть этот 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', поскольку оно нарушает следующую директиву Политики безопасности контента: blob "img-src' self": 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 Использование.trackjs.com platform-lookaside.fbsbx.com * .cocos.com * .playfab.com * .hinet.net * .cloudinary.com * .imgur.com * .myqcloud .com * .tencentcs.com ".

Сначала я думал, что эти домены были единственными, с которых можно загружать изображения, но потом я проверил другие игры, и они загружают изображения со всех видов доменов, поэтому я решил, что это как-то связано с моей целью. ,

Мой API уже разрешает CORS. Я как бы застрял здесь.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Попробуйте установить атрибут 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, но решил ее, и теперь она работает в режиме реального времени.

0 голосов
/ 11 января 2019

Политика безопасности содержимого мгновенных игр не позволяет загружать произвольные изображения с помощью тега img. Вместо этого вы можете использовать протокол blob, если вы настаиваете на теге img, или предпочтительно использовать API для рисования на холсте для рисования изображений.

...