1

This is the code I'm following. 

 storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
      // `url` is the download URL for 'images/stars.jpg'

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.setRequestHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
  xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

But I can't download image file as it says:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

However, I'm successful in displaying the image in my img tag. It would be good if I could download it also.

I using localhost to run this.

Updated: This is the new error:

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Adi Mabfalin
  • 316
  • 2
  • 3
  • 12
  • 1
    Please do not include the code in image... – Thomas Orlita Jun 06 '17 at 12:00
  • the issue is a CORS issue - clearly the URL is not same origin as the page itself - whatever server the image is coming from obviously doesn't allow such requests - so ... what server serves the image? it's not `http://localhost:8000` is it – Jaromanda X Jun 06 '17 at 12:02
  • you've shown no information at all about the server that hosts the image, so, I can't make any suggestions ... searching for *enable cors* should give you information on how to enable cors in many scenarios – Jaromanda X Jun 06 '17 at 12:06
  • I'm sure google (or whatever search engine you want) would help you – Jaromanda X Jun 06 '17 at 12:09
  • Why are you making an http request for an image you already have? Use a link: https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link – epascarello Jun 06 '17 at 12:09

1 Answers1

1

You must add headers in your server:

header('Access-Control-Allow-Origin', '*');
header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers', 'Content-Type');

For example, this will allow all domains for the methods specified and headers.

F.bernal
  • 2,594
  • 2
  • 22
  • 27
  • It is not a tip, it is the solution... if you don't have access to the server you must request the admins add your domain to get access to its resources from your domain. – F.bernal Jun 06 '17 at 12:37
  • Is the same error now caused by the allowed headers, in my response content-type header is only allowed – F.bernal Jun 06 '17 at 12:52