Access-Control-Allow-Origin Error when using Behance API + Queryloader?

Question

This is interesting. I'm using the Behance API to call some data from my profile on there to make a small portfolio carousel. I started catching these errors after I added QueryLoader2 to my webpage:

I tried to add <?php header('Access-Control-Allow-Origin: *'); ?> <?php header('Access-Control-Allow-Origin: *'); ?> to the top of my page but no changes.

Then I tried to add Header set Access-Control-Allow-Origin * to my .htaccess file to still no avail.

Some more code that could be helpful:

Queryloader JavaScript:

<script src="https://cdn.jsdelivr.net/jquery.queryloader2/2.3/jquery.queryloader2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
    $("body").queryLoader2({
        percentage:true
    });
});
</script>

Behance API Bootstrap Portfolio Script:

$(function () {

    var beUsername = 'josephrobee27e',
        beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
        bePerPage = 25,
        beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
        beItemWidth = 360,
        beItemHeight = 282,
        beLazyLoad = true,
        beLinkTarget = '_self';

    /**
     * Get Data from Behance API
     */
    if (sessionStorage.getItem('behanceProject')) {
        setPortfolioTemplate();
    } else {
        // Load JSON-encoded data from the Behance API & Store it in sessionStorage
        $.getJSON(beProjectAPI, function (project) {
        sessionStorage.setItem('behanceProject', JSON.stringify(project));
            setPortfolioTemplate();
        });
    }

    /**
     * Populate Data
     */
    function setPortfolioTemplate() {
        var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
        var portfolio = $('.be__portfolio').html('');
        var items = '';
        var image = '';
        var viewmorelink = '';

        $.each(projects, function (i, val) {
            // If Lazy load is enabled, edit the markup accordingly
            beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';

            // Create the items template
            items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-6 col-xs-12 desc">';
            items += '<div class="project-wrapper">';
            items += '<div class="project">';
            items += '<div class="photo-wrapper">'
            items += '<div style="position: relative;padding-bottom: 69%;height: 0;" class="photo">';
            items += '<a class="fancybox" target="_blank" href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
            items += '<div style="background-image:url(\''+ val.covers.original +'\');background-size:cover;background-position:center;background-repeat: no-repeat;width:370px;height:255px;max-width:100%;position:absolute;top:0;left:0;width:100%;height:100%;"></div>';
            items += '</a>';
            items += '</div>';
            items += '<div class="overlay"></div>';
            items += '</div>';
            items += '</div>';
            items += '</div>';
            items += '</div>';

            // How many items are shown
            if ($(".be__slider")[0]){
            return i < 8;
            }else{
                return i < bePerPage;
            }
        });

        // Append items only once
        portfolio.each(function (index, el) {
            $(el).append(items);
            if ($(".be__slider")[0]){
            viewmorelink += '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 desc">';
                viewmorelink += '<div class="project-wrapper">';
                viewmorelink += '<div>';
                viewmorelink += '<div style="position: relative;padding-bottom: 69%;height: 0;">';
                viewmorelink += '<div class="photo vertical-center" style="background-color:#206182;width:370px;height:255px;max-width:100%;position:absolute;top:0;left:0;width:100%;height:100%;">';
                viewmorelink += '<a href="http://josephrobertsdesigns.com/index.php/portfolio" class="btn btn-default">';
                viewmorelink += '<h2 style="margin-top:0;margin-bottom:0;"><i class="fa fa-clone"></i> View Entire Portfolio</h2>';
                viewmorelink += '</a>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                $(el).append(viewmorelink);
            }
        });

        // Create Lazy Load instance for Grid Layout
        if (beLazyLoad) {
            var layzr = new Layzr({
                container: '.be__grid',
                selector: '[data-lazy]',
                attr: 'data-lazy'
            });
        }

        $(document).ready(function(){

        $('.be__slider').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            lazyLoad: 'ondemand',
            prevArrow: '<div class="slick-prev"><i style="color:#206182;font-size: 28px;" class="fa fa-chevron-left"></i></div>',
            nextArrow: '<div class="slick-next"><i style="color:#206182;font-size: 28px;" class="fa fa-chevron-right"></i></div>',
            responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    arrows: false
                }
            }, {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                }
            }]
        });

        });;

    }

});

Can't seem to find any resources on anyone experiencing a similar problem. My QueryLoader is also getting stuck at 94% and my guess is that it has something to do with this. Any Insight? Thanks.

Answer 1

Ok, have no idea how this fixed it. But basically what I realized is that there has been a few new versions since that queryloader2 CDN was last updated. So I hosted the lasted version on my server and called that instead, and the problem was fixed.