Node + Angular：使用 HTTP 请求下载文件

Question

我尝试了 400 种语法和标头组合，但我不知道如何从 Angular 发出 HTTP 调用以从我的 NodeJS 服务器检索文件。

在 Stackoverflow 上找到并尝试过，但无济于事：

Download file from http post request - Angular 6

How download a file from HttpClient

Download a file from NodeJS Server using Express

How do I download a file with Angular2

它不能是简单的<a download> 标记或公共express.static() 文件夹，因为对文件的访问受到限制，我需要传递一个 JWT 令牌（在 Node 中，我有一个 Express 身份验证中间件如果标头中未提供令牌或令牌无效，将拒绝请求。

文件是 GZIP：./dumps/dump.gz，大小为 812 Kb。

我确实设法下载了该文件，但无论我尝试什么，它都重 1.4 MB 或 94 字节（大小错误）并且无法打开 (7zip can't open file downloads/dump.gz as archive)。

我尝试过的Angular-side（多次尝试）：

import { saveAs } from 'file-saver';

let headers = new Headers({
    "Authorization": "Bearer " + user.jwt, // I need this in the headers

    "Content-Type" : "application/octet-stream", // Tried with and without, "application/gzip", "application/json", no difference

    "responseType": "blob" as "json", // Tried with and without, "text", "json", no difference

    "Access-Control-Expose-Headers" : "Content-Disposition" // Tried with and without, no difference
})

this.http
    .get("/download/dump", { headers })
    .toPromise()
    .then(res => {

        const blob = new Blob([res["_body"]] , { type: "application/octet-stream;"} );  // Error : body is not a blob or an array buffer
        // const blob = new Blob([res["_body"]]); // Same result
        // const blob = new Blob([res.blob()]); // Error : body is not a blob or an array buffer

        saveAs(blob, "dump.gz"); // Saves a big corrupted file

        // window.URL.createObjectURL(new Blob(blob, {type: 'blob'})); Saves a 94 byte corrupted file. Tried {type: 'gzip'}, same thing
    })
    .catch(err => console.error("download error = ", err))

我尝试过的节点端（多次尝试）：

编辑

Node 已被清除，因为我可以在禁用身份验证后直接从 Chrome 检索文件。所以，后端工作正常，问题出在 Angular 上。

app.get( "/download/dump", authenticate, (req:Request, res:Response) => {
    const file = path.resolve(__dirname, `./dumps/dump.gz`);

    res
        .set({ // Tried with and without headers, doesn't seem to do anything
            "Content-Disposition" : "attachment",  // Tried with and without
            "filename" : "dump.gz", // Tried with and without
            "filename*" : "dump.gz",  // Tried with and without
            "Content-Encoding" : "gzip",  // Tried with and without
            "Content-Type" : "application/gzip"  // Tried with and without, "application/text", "application/json", no difference 
        })
        .sendFile(file); // getting a big corrupted file
        // .download(file); // Same result (big corrupted file)
})

Answer 1

假设您正在使用来自 angular 的新 HttpClient（从 angular 4 开始可用），这应该可以工作

正面

import { saveAs } from 'file-saver';
import {HttpHeaders} from "@angular/common/http";

let headers = new HttpHeaders({
    "Authorization": "Bearer " + user.jwt, // Auth header
    //No other headers needed
});

this.http
    .get("/download/dump", { headers, responseType: "blob" }) //set response Type properly (it is not part of headers)
    .toPromise()
    .then(blob => {
        saveAs(blob, "dump.gz"); 
    })
    .catch(err => console.error("download error = ", err))

后端

app.get( "/download/dump", authenticate, (req:Request, res:Response) => {
    const file = path.resolve(__dirname, `./dumps/dump.gz`);
    //No need for special headers
    res.download(file); 
})