title: Firebase Image : has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>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.</p>
  
  <p>■ EXAMPLE 1:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  
      var img_url = "./jojo1.jpg";
  
      $.ajax({
        url: img_url,
      }).done(function(response) {
        console.log("loaded ok");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This example work. 
  The image is on the same domain as the script.</p>
  
  <p>■ EXAMPLE 2:</p>
  
  <pre><code>&lt;script&gt;
  $(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");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;FilesMatch "\.(jpg|jpeg|png|gif)$"&gt;
    &lt;IfModule mod_headers.c&gt;
      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"
    &lt;/IfModule&gt;
  &lt;/FilesMatch&gt;
  </code></pre>
  
  <p>■ MY PROBLEM:</p>
  
  <p>I have an image hosted on firebase and I want to use it.
  This is my image URL:</p>
  
  <p><a href="https://firebasestorage.googleapis.com/v0/b/visual-novel-online.appspot.com/o/backgrounds%2Fjojo1.jpg?alt=media&amp;token=aa7d54b1-ec53-4543-a544-0e1e193c4fb6" rel="nofollow noreferrer">https://firebasestorage.googleapis.com/v0/b/visual-novel-online.appspot.com/o/backgrounds%2Fjojo1.jpg?alt=media&amp;token=aa7d54b1-ec53-4543-a544-0e1e193c4fb6</a></p>
  
  <p>My code:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  
      var img_url = "https://firebasestorage.googleapis.com/v0/b/visual-novel-online.appspot.com/o/backgrounds%2Fjojo1.jpg?alt=media&amp;token=aa7d54b1-ec53-4543-a544-0e1e193c4fb6";
  
      $.ajax({
        url: img_url,
      }).done(function(response) {
        console.log("loaded ok");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But I have this error:</p>
  
  <p><img src="https://visual-novel.online/firebase_error.png" alt="two muppets" title="tooltip"></p>
  
  <p>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?</p>