php - 使用 Behance API + Queryloader 时出现 Access-Control-Allow-Origin 错误？

Question

这很有趣。我正在使用Behance API从我的个人资料中调用一些数据来制作一个小型的投资组合轮播。添加 QueryLoader2 后我开始捕获这些错误到我的网页:

我尝试添加<?php header('Access-Control-Allow-Origin: *'); ?>到我的页面顶部，但没有任何变化。

然后我尝试添加 Header set Access-Control-Allow-Origin *到我的 .htaccess 文件仍然无济于事。

更多可能有用的代码:

查询加载器 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 组合脚本:

$(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 上次更新以来，已经出现了一些新版本。因此，我在我的服务器上托管了最新版本并调用了它，问题就解决了。