How to Download a File Using Window.Fetch

How can I download a file using window.fetch?

I temporarily solve this problem by using download.js and blob.

let download = require('./download.min');

...

function downloadFile(token, fileId) {
let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
return fetch(url, {
method: 'GET',
headers: {
'Authorization': token
}
}).then(function(resp) {
return resp.blob();
}).then(function(blob) {
download(blob);
});
}

It's working for small files, but maybe not working for large files. I think I should dig Stream more.

i am using window.fetch for downloading file , but is generating error file on server not on local

In order to be able to fetch resources cross-origin you need to understand and properly configure CORS headers, i.e. the server needs to send the right Access-Control-Allow-Origin and Access-Control-Allow-Methods.
Otherwise browser security will prohibit the request.

Trying to circumvent this with {mode: 'no-cors'} does not work as one might expect: although 'no-cors' will ignore the CORS headers of the server the response content will then be inaccessible to your javascript code, see the documentation for Request.mode:

no-cors — Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.

This is due to the resulting Response's type being opaque preventing you from accessing its actual contents.

For further explanation see this excellent answer to a similar question.

So what you need to do is to use {mode: 'cors'} and have the server appropriately configured to allow for cross-origin requests from your frontend domain.

Download File using express and fetch doesn't work

When you make a request using Ajax then the response is passed back to the JavaScript code for handling.

If you want to do something with the file the server has sent you, then you need to write JavaScript to do something with it.

Your JavaScript logs the response object then stops.

The browser will only automatically render it in the viewport / save it to downloads if you type the URL into the address bar / click a link / etc. Doing Ajax explicitly avoids that automatic handling.

So the solution here is: Don't use Ajax. Use a link, or assign a value to location, etc.

How to get the filename from a file downloaded using Javascript Fetch API?

So, shortly after posting this question, I ran across this issue on Github. It apparently has to do with using CORS.

The suggested work around was adding Access-Control-Expose-Headers:Content-Disposition to the response header on the server.

This worked!



Related Topics



Leave a reply



Submit