2
function download(id) {
    $.get(base_url + "account/download/" + id, function (data) {
        var data = JSON.parse(data);
        if (data.code == 1) {
            console.log(data)
//data.filePath = "https://s3.amazonaws.com/stores-products/8c0123ef4a1d685bbf50582ffb461573.jpg"
            fetch(data.filePath, { mode: 'no-cors', method: 'GET' })
                .then(resp => resp.blob())
                .then(blob => {
                    console.log(blob)
                    const url = window.URL.createObjectURL(blob);
                    console.log(url)
                    const a = document.createElement('a');
                    //a.style.display = 'none';
                    a.href = url;
                    a.download = data.fileName;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                })
                .catch(() => bootbox.alert("Unable to Download File"));
        }
        else if (data.code == 0) {
            bootbox.alert(data.msg);
        }
    });
}

under get api call I am using fetch with url of amazon s3 , its working fine on local but it generating error file on server , please review my code and let me know the issue in this code. I did not getting any error message , but downloaded file , when I am opening it show error to load file.

Apoorv Srivastava
  • 23
  • 3
  • 2
    Please also provide the error message you are getting. On which URL/domain are you executing this script an which URL/domain are you trying to load? – acran Jul 21 '20 at 14:27
  • data.filePath = "https://s3.amazonaws.com/stores-products/8c0123ef4a1d685bbf50582ffb461573.jpg" I did not getting any error message , but downloaded file , when I am opening it show error to load file. domain : http://rj.ltj3demo.com/ – Apoorv Srivastava Jul 22 '20 at 04:56
  • There is no issue in this code, the server at the other end simply doesn't allow Cross-Origin Requests. Either you were trying to fetch an other resource on local, either you have some setting on your browsers to allow by-passing Same-Origin Policies (either a flag or maybe an add-on?) – Kaiido Jul 22 '20 at 06:03
  • The code looks fine. I guess something is not in sync on S3. can you check your S3 bucket settings? – Sheelpriy Jul 22 '20 at 06:31
  • for cors I have used mode: 'no-cors' – Apoorv Srivastava Jul 22 '20 at 08:14
  • @Apoorv Srivastava what exactly do you mean by _opening [the file]_? `.then(resp => resp.blob())`? What is the error message you get _then_? – acran Jul 22 '20 at 09:32
  • when i console,log(blob) ,i am getting Blob {size: 0, type: ""} this is the issue , not getting type and size 0 , that is why downloaded file is not opening – Apoorv Srivastava Jul 22 '20 at 09:40
  • downloaded file is not opening and empty file size 0 , how can I achieve this ? – Apoorv Srivastava Jul 22 '20 at 09:47

1 Answers1

0

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.

acran
  • 7,070
  • 1
  • 18
  • 35