Firebase Image : has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am new Firebase User. I use a script (Phaser JS) that loads an image in Ajax. To illustrate my problem here, I give you jQuery Example.

■ EXAMPLE 1:

<script>
$(document).ready(function(){

    var img_url = "./jojo1.jpg";

    $.ajax({
      url: img_url,
    }).done(function(response) {
      console.log("loaded ok");
    });
});
</script>

This example work. The image is on the same domain as the script.

■ EXAMPLE 2:

<script>
$(document).ready(function(){

    var img_url = "https://visual-novel.online/assets/new_backgrounds/jojo1.jpg";

    $.ajax({
      url: img_url,
    }).done(function(response) {
      console.log("loaded ok");
    });
});
</script>

This example work too (you can test too, there aren't problem). The image is on my personal domain + I modified the htaccess like that:

<FilesMatch "\.(jpg|jpeg|png|gif)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PUT"
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
  </IfModule>
</FilesMatch>

■ MY PROBLEM:

I have an image hosted on firebase and I want to use it. This is my image URL:

https://firebasestorage.googleapis.com/v0/b/visual-novel-online.appspot.com/o/backgrounds%2Fjojo1.jpg?alt=media&token=aa7d54b1-ec53-4543-a544-0e1e193c4fb6

My code:

<script>
$(document).ready(function(){

    var img_url = "https://firebasestorage.googleapis.com/v0/b/visual-novel-online.appspot.com/o/backgrounds%2Fjojo1.jpg?alt=media&token=aa7d54b1-ec53-4543-a544-0e1e193c4fb6";

    $.ajax({
      url: img_url,
    }).done(function(response) {
      console.log("loaded ok");
    });
});
</script>

But I have this error:

This error is normal because of the header. How can I change and resolve my problem. Indeed, I am new on Firebase and I don't know what should I do?