Search code examples
jqueryajaxcdncross-origin-read-blocking

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

I have a domain for my web application, lets say:

http://example.com

And I have my assets hosted on a CDN (Cloudfront)

https://examplecdn.cloudfront.net

So I do an ajax call that has to load some HTML that comes from the server, in that HTML there are images that should be loaded from the CDN cloud, lets say:

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

On http, is doing it all right no single problem with it. But, if somebody tries to go https on the web application, the ajax call will fail, and prompt this error on the console:

Access to XMLHttpRequest at 'https://example.com/AjaxModal' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. jquery-3.3.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://example.com/AjaxModal with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Anybody knows if this problem can be solved anyhow? Or whats the right way to go to achieve this?

Here is an example of the code.

    //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>
Solution

  • It was a two things solution:

    1) The parameter

    crossDomain: true

    was needed to deal with cross-domain requests, the default value for that is false

    2) www was missing at the beginning in my base_url var, for consequence having:

    https://example.com

    is not the same as

    https://www.example.com

    Thank you so much @Siavas for your time