我的 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://www.example.com ”访问“ https://example.com/AjaxModal ”中的 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>