通过 ajax 从 CDN 加载图像导致 Cross-Origin 在 https 上读取阻塞

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' from origin 'https://www.example.com”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。 jquery-3.3.1.min.js:2 Cross-Origin 读取阻止 (CORB) 已阻止 cross-origin 响应 https://example.com/AjaxModal with MIME type text/html. See 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) www 在我的 base_url var 开头丢失，因为结果有：

https://example.com

与

不一样

https://www.example.com

非常感谢@Siavas抽出时间

通过 ajax 从 CDN 加载图像导致 Cross-Origin 在 https 上读取阻塞

Loading images from CDN via ajax causing Cross-Origin Read Blocking on https

jquery

ajax

cdn

cross-origin-read-blocking