通过ajax从CDN加载图像，导致https上的跨源读取阻塞

Question

我有一个用于我的Web应用程序的域，让我们说：

http://example.com

我的资产托管在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）参数

crossDomain: true

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

2）在我的base_url var的开头缺少www，结果是：

https://example.com

是不一样的

https://www.example.com

非常感谢@Siavas你的时间