0

我的 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://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>
4

1 回答 1

0

这是一个两件事的解决方案：

1) 参数

crossDomain: true

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

2) 在我的 base_url var 的开头缺少 www，因为有：

https://example.com

不一样

https://www.example.com

非常感谢@Siavas 抽出宝贵时间

于 2019-01-24T21:57:36.377 回答