带请求头验证时，如何在新窗口打开Axios返回的CSV文件？

我太懂这种憋屈感了——加了令牌验证后直接用window.open触发安全限制，明明已经拿到CSV数据却没法正常打开对吧？别慌，咱们可以通过Blob对象+临时URL的方式绕开这个限制，具体实现如下：

完整代码替换方案 #

把你注释处的代码换成这段就行，我给你加了关键注释说明：

axiosWithHeaders.post(url, testsToExportToCsv)
  .then(response => {
    // 重点：请求时指定响应类型为blob，确保拿到二进制格式的CSV数据
    axiosWithHeaders
      .get(response.data.uri, { responseType: 'blob' })
      .then(response => {
        // 1. 将二进制数据包装成CSV格式的Blob对象
        const csvBlob = new Blob([response.data], { type: 'text/csv;charset=utf-8;' });
        // 2. 生成浏览器可识别的临时URL
        const tempCsvUrl = URL.createObjectURL(csvBlob);
        // 3. 在新窗口打开这个临时URL
        const win = window.open(tempCsvUrl, '_blank');
        win.focus();
        
        // 4. 窗口加载完成后释放临时URL，避免内存泄漏
        win.addEventListener('load', () => {
          URL.revokeObjectURL(tempCsvUrl);
        });
      })
      .catch(err => {
        console.error('获取CSV数据出错:', err);
      });
  });

几个必注意的细节 #

• 必须加responseType: 'blob'：如果不加，Axios会默认把CSV数据解析成字符串，生成的临时URL会直接显示乱码文本，而不是可下载/预览的CSV文件。
• 临时URL要及时释放：URL.createObjectURL会占用浏览器内存，用完后记得用URL.revokeObjectURL清理，避免长时间积累内存泄漏问题。
• 若新窗口被拦截：如果遇到浏览器拦截新窗口的情况，建议把这段逻辑绑定到用户主动触发的事件上（比如按钮点击），浏览器通常不会拦截用户主动操作打开的窗口。

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