我正在使用 window.fetch 下载文件，但在服务器上生成错误文件而不是在本地

Question

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);
        }
    });
}

在获取 api 调用下，我使用 fetch 和 amazon s3 的 url，它在本地工作正常，但在服务器上生成错误文件，请查看我的代码并让我知道此代码中的问题。我没有收到任何错误消息，但下载了文件，当我打开它时显示加载文件错误。

Answer 1

为了能够fetch资源跨域，您需要了解并正确配置CORS标头，即服务器需要发送正确的Access-Control-Allow-Origin和Access-Control-Allow-Methods。 否则浏览器安全将禁止该请求。

尝试使用{mode: 'no-cors'} 来规避这一点并不像人们预期的那样工作：尽管'no-cors' 将忽略服务器的CORS 标头，但您的javascript 代码将无法访问响应内容，请参阅the documentation for Request.mode：

no-cors — 防止方法是 HEAD、GET 或 POST 以外的任何内容，并且标头不能是简单标头以外的任何内容。如果任何 ServiceWorkers 拦截了这些请求，它们可能不会添加或覆盖除简单标头之外的任何标头。 此外，JavaScript 可能不会访问生成的 Response 的任何属性。这可确保 ServiceWorker 不会影响 Web 的语义，并防止因跨域泄露数据而引起的安全和隐私问题。

这是由于生成的 Response's type being opaque 阻止您访问其实际内容。

更多解释见this excellent answer to a similar question。

所以您需要做的是使用{mode: 'cors'} 并适当配置服务器以允许来自您的前端域的跨域请求。