AngularJS中REST API下载文本文件：Postman正常浏览器报错

看起来你踩了一个前端下载文件的常见坑：Postman能正常获取文本内容，但浏览器里却把后端返回的响应当成了路由路径，导致出现Cannot GET /Organizer/%7B%22data%22:...的错误。核心原因是你的前端代码错误地把响应内容当作URL去跳转，而没有正确处理响应本身来触发下载行为。

先拆解错误根源 #

Postman是直接解析API返回的响应内容，但如果你的前端用了类似$window.open($scope.newFile)或者直接路由跳转的方式，浏览器会把$scope.newFile里的文本内容当成URL路径去发起新的GET请求——这显然不是你想要的，因为那是文件内容，不是有效的接口地址。

正确的解决方案步骤 #

1. 先确保后端设置正确的响应头

首先要让后端明确告诉浏览器：这是一个需要下载的文本文件，不是普通的API响应。需要设置两个关键响应头：

• Content-Type: text/plain：明确这是纯文本格式内容
• Content-Disposition: attachment; filename="your-file-name.txt"：告诉浏览器要触发下载行为，并指定默认文件名
• 如果是跨域请求，还要加上Access-Control-Expose-Headers: Content-Disposition，不然AngularJS无法读取这个响应头

举个后端（以Express为例）的代码示例：

app.get('/Organizer/download', (req, res) => {
  // 你的文本文件内容
  const fileContent = 'id/tname/temail/tphone/twebsite/tvenue/ttags/n83/tAny Name/ta@b.com/t9009009009/thttp://www.anyname.com/tHall A/ttag1, tag2, tag3/nsunitha/tsunitha@gmail.com/t55555541/thttp://www.sunitha.com/nSuhasini/tsuha@gmail.com/t955555544/thttp://www.suha.com/nRaichel/traichel@gmail.com/t955548458/thttp://www.raiche...';
  
  res.setHeader('Content-Type', 'text/plain');
  res.setHeader('Content-Disposition', 'attachment; filename="organizer-data.txt"');
  // 跨域场景必须加这个，否则前端拿不到文件名信息
  res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
  
  res.send(fileContent);
});

2. AngularJS端正确处理响应并触发下载

在AngularJS中，你需要用$http发起请求，并指定responseType: 'blob'（处理文件类响应的标准方式），然后通过创建临时下载链接来触发浏览器的下载行为：

$scope.downloadOrganizerFile = function() {
  $http({
    method: 'GET',
    url: '/Organizer/download', // 这里是正确的API接口地址，不是响应内容
    responseType: 'blob' // 关键：告诉AngularJS要处理二进制/blob类型的响应
  }).then(function(response) {
    // 从响应头提取文件名（如果后端设置了的话）
    const contentDisposition = response.headers('Content-Disposition');
    let fileName = 'organizer-data.txt'; // 兜底的默认文件名
    if (contentDisposition) {
      const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
      if (fileNameMatch && fileNameMatch[1]) {
        fileName = fileNameMatch[1];
      }
    }

    // 创建Blob对象和临时下载链接
    const blob = new Blob([response.data], { type: 'text/plain' });
    const downloadUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    
    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;
    document.body.appendChild(downloadLink);
    
    // 触发点击下载
    downloadLink.click();
    
    // 清理临时资源，避免内存泄漏
    URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(downloadLink);
  }, function(error) {
    console.error('文件下载失败:', error);
    // 这里可以添加前端错误提示逻辑，比如弹出 Toast
  });
};

关键注意点 #

• 绝对不要把后端返回的文件内容当作URL来使用，那是文件本身，不是接口地址
• 一定要设置responseType: 'blob'，不然AngularJS会默认把响应当成JSON解析，导致乱码或者错误
• 跨域场景下必须让后端暴露Content-Disposition头，否则前端无法获取自定义的文件名

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