Download Image using Fetch API

Question

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?

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
– Tavish Aggarwal, Commented Oct 9, 2017 at 8:25
@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. — user2652134
– user2652134, Commented Oct 9, 2017 at 8:31
Yes, @BrahmaDev.. I am fetching third party images with mode {mode: 'no-cors'}. But am getting empty object. — Tavish Aggarwal
– Tavish Aggarwal, Commented Oct 9, 2017 at 8:33

ekanna · Accepted Answer · 2018-07-12 06:07:55Z

15

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

answered Jul 12, 2018 at 6:07

ekanna

5,8128 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vsevolod Azovsky Over a year ago

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 (?!)

Collectives™ on Stack Overflow

Download Image using Fetch API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related