Question

我有一个用于Web应用程序的域，可以这样说：

我的资产托管在CDN（Cloudfront）上

https://examplecdn.cloudfront.net

所以我做一个ajax调用，它必须加载来自服务器的一些HTML，在HTML中，应该从CDN云中加载图像，让我们说：

<img src="https://mycdn.cloudfront.net/assets/img/img.png">

在http上，这样做没有任何问题。但是，如果有人尝试在Web应用程序上执行https，则ajax调用将失败，并在控制台上提示此错误：

从原点“ https://example.com/AjaxModal”到“ https://www.example.com”的XMLHttpRequest的访问已被CORS策略阻止：所请求的资源上没有“ Access-Control-Allow-Origin”标头。 jquery-3.3.1.min.js：2跨域读取阻止（CORB）阻止了MIME类型为text / html的跨域响应https://example.com/AjaxModal。有关更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768。

任何人都知道是否可以解决此问题？还是实现该目标的正确方法是什么？

这是代码示例。

    //This how my ajax call looks like:
function ajaxModal(url){
    $.ajax({
        url: '<?=BASE_URL_HOSTING?>AjaxModal',
        data: {
            file:url
        },
        cache: true,
        type:"POST",
        dataType:"html",
        beforeSend: function(){
            $(".modal-content").html("<div class='text-center v-center'>Loading...</div>");
        },
        error: function(){
            $(".modal-content").html("Error while loading. Please try again later.");
        },
        success: function(data){
            $(".modal-content").html(data);
        }
    });
}


===============================================================
//This is the content loaded via ajax
<style>
#slider .slide1{
background-image: url(https://examplecdn.cloudfront.net/assets/img/image1.jpg);
}
#slider .slide2{
background-image: url(https://examplecdn.cloudfront.net/assets/img/image2.jpg);
}
</style>
<div class="slider-wrapper">
    <div class="slider">
        <div class='slide1'></div>
        <div class='slide2'></div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col text-center">
            <img class="img-fluid v-center" src="https://examplecdn.cloudfront.net/assets/img/other-image.png">
        </div>
    </div>
    <div class="row">
        <div class="col text-center">
            <img class="img-fluid v-center" src="https://examplecdn.cloudfront.net/assets/img/another-image.png">
        </div>
    </div>
</div>

Answer 1

这是两个解决方案：

1）参数

gte

需要处理跨域请求，默认值为false

2）我的base_url var开头缺少www，原因是：

Post.paginate({
    created_on: {
        $gte: new Date('2019-01-01T00:00:00.000Z')
    }
}, {
    page: 2,
    limit: 10,
    sort: {
        created_on: 'desc'
    }
}).then((data) => {
    // do something with docs
});

与

不同

crossDomain: true

非常感谢您@Siavas的宝贵时间

通过Ajax从CDN加载图像，从而导致https

1 个答案: