使用Behance API + Queryloader時出現Access-Control-Allow-Origin錯誤？

Question

這是有趣的。 我正在使用Behance API從那里的個人資料中調用一些數據，以制作小型投資組合輪播。 在將QueryLoader2添加到我的網頁后，我開始捕獲這些錯誤：

我試圖添加<?php header('Access-Control-Allow-Origin: *'); ?> <?php header('Access-Control-Allow-Origin: *'); ?>到我頁面的頂部，但沒有更改。

然后，我嘗試將Header set Access-Control-Allow-Origin *到我的.htaccess文件中，仍然無濟於事。

其他一些可能有用的代碼：

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引導程序包腳本：

$(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,
                }
            }]
        });

        });;

    }

});

遇到任何類似問題的人似乎都找不到任何資源。 我的QueryLoader也卡在94％的位置，我的猜測是與此有關。 有見識嗎？ 謝謝。

Answer 1

好的，不知道如何解決此問題。 但是基本上我意識到，自從上一次更新queryloader2 CDN以來，已經有了一些新版本。 因此，我在服務器上托管了最新版本，然后調用了該版本，此問題已解決。