Angular5如何读取响应头Content-Disposition？求解决方法

这个问题的核心是浏览器的CORS安全机制：跨域请求时，默认只有「简单响应头」（比如Content-Type、Cache-Control等）能被前端JavaScript读取，像Content-Disposition这类头需要后端明确声明允许暴露，否则前端会拿不到。

第一步：修改Node后端代码，允许暴露响应头 #

你需要在后端添加Access-Control-Expose-Headers响应头，指定让浏览器允许前端读取Content-Disposition。另外注意：res.download()会自动覆盖你手动设置的Content-Disposition，所以可以调整写法避免冲突：

app.get('/download', function (req, res) {
  var file = __dirname + '/db.json';
  // 注意：GET请求一般用query参数传递filename，而不是body
  const filename = req.query.filename; 

  // 关键：告诉浏览器允许前端读取Content-Disposition头
  res.set('Access-Control-Expose-Headers', 'Content-Disposition');
  
  // 用res.download的参数直接指定文件名，它会自动生成正确的Content-Disposition
  res.download(file, filename, (err) => {
    if (err) {
      // 处理下载错误，比如文件不存在等
      console.error('Download error:', err);
      res.status(500).send('Failed to download file');
    }
  });
});

如果一定要手动设置Content-Disposition，可以改用res.sendFile()：

app.get('/download', function (req, res) {
  var file = __dirname + '/db.json';
  const filename = req.query.filename;

  res.set({
    'Content-Type': 'text/plain',
    'Content-Disposition': `attachment; filename="${filename}"`,
    'Access-Control-Expose-Headers': 'Content-Disposition'
  });

  res.sendFile(file);
});

第二步：调整Angular5前端代码 #

确保你能正确获取完整的响应对象（包括headers），同时处理文件名的解析（避免引号等特殊字符问题）：

如果你用的是旧版Http模块： #

saveFile() {
  const headers = new Headers();
  headers.append('Accept', 'text/plain');
  
  // 指定responseType为blob，避免解析错误
  this.http.get('http://localhost:8090/download', { 
    headers: headers,
    responseType: 'blob' as 'json'
  })
  .subscribe(response => this.saveToFileSystem(response));
}

private saveToFileSystem(response: Response) {
  // 现在可以正常读取Content-Disposition了
  const contentDisposition = response.headers.get('Content-Disposition');
  if (!contentDisposition) {
    alert('无法获取文件名');
    return;
  }

  // 正则匹配文件名，兼容带引号的格式（比如filename="db.json"）
  const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
  const filename = filenameMatch ? filenameMatch[1].replace(/['"]/g, '') : '未知文件.txt';
  
  const blob = new Blob([response.blob()], { type: 'text/plain' });
  saveAs(blob, filename);
}

如果你用的是新版HttpClient模块（更推荐）： #

import { HttpClient, HttpResponse } from '@angular/common/http';

// ...

saveFile() {
  const headers = new HttpHeaders().append('Accept', 'text/plain');
  
  // 关键：设置observe: 'response'来获取完整响应对象（包括headers）
  this.http.get('http://localhost:8090/download', {
    headers: headers,
    observe: 'response',
    responseType: 'blob'
  })
  .subscribe((response: HttpResponse<Blob>) => this.saveToFileSystem(response));
}

private saveToFileSystem(response: HttpResponse<Blob>) {
  const contentDisposition = response.headers.get('Content-Disposition');
  if (!contentDisposition) {
    alert('无法获取文件名');
    return;
  }

  const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
  const filename = filenameMatch ? filenameMatch[1].replace(/['"]/g, '') : '未知文件.txt';
  
  const blob = response.body;
  saveAs(blob, filename);
}

额外注意事项 #

• GET请求不要用req.body传递参数：GET请求默认没有请求体，前端应该把filename放在URL的query参数里（比如/download?filename=myfile.json），后端用req.query.filename获取。
• 引号处理：Content-Disposition里的文件名可能带双引号（比如filename="my file.txt"），解析时要去掉引号避免文件名异常。

内容的提问来源于stack exchange，提问作者Bhupal