Node + Angular：下载带有 HTTP 请求的文件

Question

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

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

从 http post 请求下载文件 - Angular 6

如何从 HttpClient 下载文件

使用 Express 从 NodeJS 服务器下载文件

如何使用 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 端（多次尝试）：

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

假设您使用的是HttpClient来自 angular的新版本（从 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); 
})