如何在location.href的GET导出Excel请求中添加Bearer Token？

你遇到的问题确实很常见——Ajax可以轻松设置请求头带Token，但用location.href跳转的GET请求没法直接自定义请求头，浏览器本身不支持这种操作。不过有几个靠谱的替代方案，我给你梳理一下：

方案一：用XMLHttpRequest/Fetch API发起请求并处理Blob下载（推荐） #

这个方法既能带上Authorization头，又不会暴露Token，是最安全的做法。核心思路是用AJAX发起请求（能设置请求头），拿到返回的Excel文件Blob后，手动触发浏览器的下载行为。

示例代码（用XHR实现）： #

// 假设你的Token存在这里
const authToken = '你的Bearer Token';
const getUrl = '/LandingView/ExportToExcel?excelHeader=' + excelHeader + 
               '&companyId=' + $scope.options.companyId +
               '&startDate=' + $scope.options.startDate.toJSON() +
               '&endDate=' + $scope.options.endDate.toJSON() +
               '&page=' + $...; // 补全你的其他参数

const xhr = new XMLHttpRequest();
xhr.open('GET', getUrl, true);
// 设置Authorization头
xhr.setRequestHeader('Authorization', 'Bearer ' + authToken);
// 告诉XHR我们要接收Blob类型的响应
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    // 创建一个临时的a标签来触发下载
    const blob = new Blob([xhr.response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    // 设置下载的文件名，可根据后端返回的Content-Disposition头调整
    a.download = '导出数据.xlsx';
    document.body.appendChild(a);
    a.click();
    // 清理临时资源
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
};

xhr.send();

用Fetch API的版本（更简洁）： #

const authToken = '你的Bearer Token';
const getUrl = '/LandingView/ExportToExcel?excelHeader=' + excelHeader + 
               '&companyId=' + $scope.options.companyId +
               '&startDate=' + $scope.options.startDate.toJSON() +
               '&endDate=' + $scope.options.endDate.toJSON() +
               '&page=' + $...;

fetch(getUrl, {
  headers: {
    'Authorization': 'Bearer ' + authToken
  }
})
.then(response => response.blob())
.then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '导出数据.xlsx';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

方案二：将Token作为URL参数传递（不推荐生产环境） #

如果后端允许的话，可以把Token直接拼到URL参数里，比如：

const getUrl = '/LandingView/ExportToExcel?excelHeader=' + excelHeader + 
               '&companyId=' + $scope.options.companyId +
               '&token=' + authToken + // 把Token加在这里
               '&startDate=' + $scope.options.startDate.toJSON() +
               '&endDate=' + $scope.options.endDate.toJSON() +
               '&page=' + $...;
location.href = getUrl;

⚠️ 注意：这种方法有安全风险，Token会暴露在URL中，可能被记录到服务器日志、浏览器历史或被第三方截取，只建议在测试环境临时用，生产环境千万别这么做。

方案三：用隐藏表单提交POST请求（适用于后端支持POST的情况） #

如果你的导出接口支持POST请求，可以创建一个隐藏的表单，把Token和其他参数作为表单字段提交，这样Token不会出现在URL里：

const authToken = '你的Bearer Token';
// 创建隐藏表单
const form = document.createElement('form');
form.method = 'POST';
form.action = '/LandingView/ExportToExcel';
form.style.display = 'none';

// 添加Token字段
const tokenInput = document.createElement('input');
tokenInput.type = 'hidden';
tokenInput.name = 'Authorization'; // 或者后端约定的参数名，比如token
tokenInput.value = 'Bearer ' + authToken;
form.appendChild(tokenInput);

// 添加其他参数
const headerInput = document.createElement('input');
headerInput.type = 'hidden';
headerInput.name = 'excelHeader';
headerInput.value = excelHeader;
form.appendChild(headerInput);

// 重复上面的方式添加companyId、startDate等参数...

// 提交表单
document.body.appendChild(form);
form.submit();
// 提交后移除表单
document.body.removeChild(form);

这个方案比URL参数安全，但需要后端配合修改导出接口，支持接收POST参数并验证Token。

内容的提问来源于stack exchange，提问作者Dayán Ruiz