AngularJS调用需鉴权API获取PDF失败，求技术解决方案

我之前也碰到过一模一样的情况：直接访问API能拿到PDF，但通过AngularJS控制器函数调用就失败，哪怕去掉鉴权也不行。核心问题其实是AngularJS默认的响应处理逻辑不适合二进制文件（比如PDF），再加上要确保鉴权Cookie被正确携带。下面是亲测有效的解决方案：

1. 关键：给$http请求设置响应类型 #

AngularJS默认会把响应当成文本或JSON处理，这会导致PDF二进制数据被解析错误。必须显式指定responseType: 'blob'，让它把响应当成二进制Blob数据处理。

$scope.downloadPdf = function() {
  // 发起带鉴权的GET请求获取PDF
  $http({
    method: 'GET',
    url: '/api/your-pdf-endpoint', // 替换成你的实际API地址
    responseType: 'blob' // 这行是核心，不能少
  }).then(function(response) {
    // 成功拿到Blob数据后，触发下载
    triggerPdfDownload(response.data);
  }).catch(function(error) {
    console.error('PDF下载失败:', error);
    alert('无法获取PDF文档，请稍后重试');
  });
};

// 辅助函数：处理Blob并触发浏览器下载
function triggerPdfDownload(blobData) {
  // 创建PDF类型的Blob对象
  var pdfBlob = new Blob([blobData], { type: 'application/pdf' });
  // 生成临时下载URL
  var tempUrl = URL.createObjectURL(pdfBlob);
  
  // 创建隐藏的a标签来触发下载
  var downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  downloadLink.download = 'your-document.pdf'; // 设置下载后的文件名
  downloadLink.style.display = 'none';
  
  // 添加到DOM并模拟点击
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 清理临时资源，避免内存泄漏
  setTimeout(function() {
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(tempUrl); // 释放临时URL
  }, 100);
}

2. 确保鉴权Cookie被正确携带 #

因为你用ng-token-auth把鉴权信息存在Cookie里，要保证AngularJS的请求能自动带上Cookie：

• 如果是同域请求：默认Cookie会自动携带，但如果前端和API是子域名差异，需要在AngularJS配置里开启withCredentials：

angular.module('yourApp').config(function($httpProvider) {
  $httpProvider.defaults.withCredentials = true;
});

• 如果是跨域请求：除了上面的配置，还需要API端设置CORS允许携带凭证（比如Access-Control-Allow-Credentials: true），不过你说直接访问API正常，大概率是同域场景，这一步可能不需要。

3. 验证API的响应头 #

确保你的API返回的响应头里包含Content-Type: application/pdf，否则浏览器可能无法正确识别文件类型，导致下载后无法打开。

4. HTML调用方式 #

页面里用ng-click触发下载函数，不要直接用<a>标签的href（虽然直接href能访问API，但无法通过AngularJS处理二进制响应）：

<button class="btn" ng-click="downloadPdf()">下载PDF文档</button>

这套流程我之前用它解决了和你完全一样的问题，亲测有效。

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