Твиттер не работает, кросс-источник заблокирован

Question

Я написал некоторый код, который будет использовать oembed для загрузки различных сообщений в социальных сетях на основе того, что введено в атрибуты данных. Элементы Instagram работают нормально, однако элементы Twitter не работают.

Ошибка в консоли: "На запрашиваемом ресурсе отсутствует заголовок" Access-Control-Allow-Origin "."

Я посмотрел на твиттеры и понял, что URL правильный. Почему он заблокирован?

<div class="join-convo">
    <div class="grid-item" data-service="instagram" data-url="/p/BXtn9GTgRTj/"></div>
    <div class="grid-item" data-service="instagram" data-url="/p/BVIk42klsh1/"></div>
    <div class="grid-item" data-service="twitter" data-url="/mro01934/status/908472059403034626"></div>
</div>


function getData(itemService,itemUrl) {
    var serviceLink = '';
    if(itemService == 'instagram') {
        serviceLink = 'https://api.instagram.com/oembed?url=https://www.instagram.com';
    }
    else if(itemService == 'twitter') {
        serviceLink = 'https://publish.twitter.com/oembed?url=https://twitter.com';
    }
    return $j.getJSON( serviceLink + itemUrl )
    .done(function(data) {
        console.log('success');
    })
    .fail(function() {
        console.log('error');
    })
}

$j().ready(function() { 
    var results = [];
    var embedContainer = $j('.join-convo');
    var vidItems = embedContainer.children('.grid-item');

    var p = $j.when(1); // empty promise
    vidItems.each(function(el,i){
        var item = $j(this);
        var service  = item.attr('data-service');
        var url = item.attr('data-url');

        p = p.then(function(){
            return getData(service,url);
        }).then(function(data){
            results[i] = data;
            item.html(results[i].html);
        });
    });
});