[RESOLVED] Is there a way to download file from http sever for framework7?

Questions
1

Is there a way to download file from http sever for framework7 ?

I had tried several method of es6, but all of them were failed. Could sb show me the code?

2

If you give me an example of what you’re trying to do, I might be able to offer a suggestion.

3

Hi hellohello1, thank u for ur reply. as ur wish, my test as follow:

fetch(url).then (res => res.bolb().then(bolb => {
  let a = document.createElement('a');
  let url = window.URL.createObjectURL(blob);
  let filename = res.headers.get('Content-Disposition');
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
}));

the error message as follow :

Access to fetch at ‘http://172.18.84.111:5984/kalix/d2dad258ed3945d38d009e08e23cdd26/宣讲资料.docx’ from origin ‘http://172.18.84.18:8080’ has been blocked by CORS policy: 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.

4

It’s basically a browser security measure. To overcome this problem during development, you may simply run Chrome with security features disabled. For example, in Windows you can close all instances of Chrome, open a Run window and use the following command:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

It should then work. Obviously this is only useful for testing. For production code, the fix is very easy if you control the server. Just set the CORS headers on the script which will serve the file. For example, the headers on one of my PHP scripts look like this (just a random one):

header('Access-Control-Allow-Origin: *'); 
header("Content-type: application/json");
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

Without those headers on my server-side script, I get the same error you described. Further info about the settings can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control

If you do not control the server on which the file is located, then you can use a similar kind of method via proxy. If you have access to a server, just write a script with the CORS headers set that your app will connect to, and let the script fetch the file you want and send it to the app. If you don’t have access to any server, I think there are even 3rd party services which do this.

5

I get it. thank u for ur expatiation. It is so detailed.