Загрузка изображений из CDN через ajax вызывает блокировку чтения из-за перекрестного источника в https - PullRequest
Новая
       36

Загрузка изображений из CDN через ajax вызывает блокировку чтения из-за перекрестного источника в https

0 голосов
/ 23 января 2019

У меня есть домен для моего веб-приложения, скажем:

http://example.com

И мои активы размещены на CDN (Cloudfront)

https://examplecdn.cloudfront.net

Итак, я делаю ajax-вызов, который должен загрузить некоторый HTML, который приходит с сервера, в этом HTML есть изображения, которые должны быть загружены из облака CDN, скажем: 

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

На http, все делает правильно, ни единой проблемы с ним. Но если кто-то попытается зайти по https в веб-приложении, вызов ajax завершится неудачно и выдаст сообщение об ошибке на консоли:

Доступ к XMLHttpRequest в «https://example.com/AjaxModal' от источника» https://www.example.com' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». jquery-3.3.1.min.js: 2 Блокировка чтения из разных источников (CORB) заблокировала ответ из нескольких источников https://example.com/AjaxModal с типом MIME text / html. Подробнее см. 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>

1 Ответ

0 голосов
/ 25 января 2019

Это было решение двух вещей:

1) Параметр 

crossDomain: true

был необходим для обработки междоменных запросов, для него по умолчанию установлено значение false

2) www отсутствовал в начале в моей базе base_url, потому что: 

https://example.com

- это не то же самое, что 

https://www.example.com

Большое спасибо @Сиавас на ваше время

...