19

I know this question is answered, but I am facing issue while downloading image using Fetch API.
Code that I am using to get image.

function downloadImage() {
  fetch('https://upload.wikimedia.org/wikipedia/commons/9/98/Pet_dog_fetching_sticks_in_Wales-3April2010.jpg',
    {mode: 'no-cors'})
  .then(response => response.blob())
  .then(blob => {
        console.log(blob);           
  });
}

Here, when I do console.log I get response Blob {size: 0, type: ""}.
Please let me know what I am doing wrong here?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Tavish Aggarwal
  • 1,020
  • 3
  • 22
  • 51
  • 2
    You should use `{mode: 'cors'}`. – R Lam Oct 09 '17 at 08:20
  • With it I am getting error: No 'Access-Control-Allow-Origin' header is present on the requested resource.If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. – Tavish Aggarwal Oct 09 '17 at 08:25
  • 1
    @TavishAggarwal Are you fetching wikimedia images ? Because they definitely have CORS headers and this code will definitely work. If you want to fetch some other 3rd party resources, then it's not possible without those headers. – Brahma Dev Oct 09 '17 at 08:31
  • 1
    Yes, @BrahmaDev.. I am fetching third party images with mode {mode: 'no-cors'}. But am getting empty object. – Tavish Aggarwal Oct 09 '17 at 08:33
  • That's not possible without CORS headers. See: https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present – Brahma Dev Oct 09 '17 at 08:36
  • ohh..ok.. Thanks @Brahma.. Then I need to look for some other alternative. – Tavish Aggarwal Oct 09 '17 at 08:38
  • You'll have to do it on the server side. There is no alternative for this to be done in the browser. – Brahma Dev Oct 09 '17 at 08:39
  • @RLam - definitely not if you want to access the response – Jaromanda X Oct 09 '17 at 09:08
  • @JaromandaX, sorry it was a few days ago, but the question just got up on questions stream and I saw your comment, in which I guess you confused `mode:cors` which requests the cross-origin headers, with the `mode:no-cors` that will return an opaque Response. RLam is right, OP using `no-cors` is the problem for blob being empty. – Kaiido Oct 15 '17 at 05:48
  • Possible duplicate of https://stackoverflow.com/questions/41921805/fetch-api-to-get-html-response/41921909 – Kaiido Oct 15 '17 at 05:49
  • 1
    @Kaiido - perhaps I did – Jaromanda X Oct 15 '17 at 05:52
  • Thanks all for help! I was able to resolve it by adding CORS header in my service request. :) – Tavish Aggarwal Oct 15 '17 at 10:19

1 Answers1

13

By default fetch uses CORS mode. But when server response doesn't contain 'Access-Control-Allow-Origin' header. It skips response body.

Ironically, you have to set mode as 'no-cors' to request opaque resources. Opaque responses can't be accessed with JavaScript but the response can still be served or cached by a service worker.

https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api

ekanna
  • 5,462
  • 8
  • 28
  • 31
  • 2
    Could you explain, how to use "service workers"? I use raw JS and fetch API, in browser console I see server responses with image, but JS promise does not have Body (null) and status = 0 (?!) – Vsevolod Azovsky Nov 20 '19 at 05:54