Angular中处理Python返回的Google Drive文件下载404错误

直接通过window.location.href跳转下载的方式，无法捕获HTTP错误（比如404），因为这是浏览器直接发起的跳转请求，Angular无法拦截这类请求的响应状态。要避免应用崩溃并友好处理文件不存在的情况，推荐以下两种方案：

方案一：先通过HEAD请求验证文件状态 #

利用Angular的HttpClient发送HEAD请求，提前检查文件是否存在，只有验证通过后再触发下载：

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
import { FbApiConstants } from './constants/fb-api.constants';

@Injectable()
export class DownloadService {
  constructor(
    private http: HttpClient,
    private fbApiConstants: FbApiConstants
  ) {}

  downloadBuildFile(app: any, token: string): void {
    const downloadUrl = `${environment.urls.baseUrl}${this.fbApiConstants.API_URLS.private_build_url}?id=${app.build_id}&token=${token}`;

    // 发送HEAD请求获取响应状态
    this.http.head(downloadUrl, { observe: 'response' }).subscribe({
      next: () => {
        // 状态码200，文件存在，触发下载
        window.location.href = downloadUrl;
      },
      error: (err: HttpErrorResponse) => {
        if (err.status === 404) {
          // 文件已删除或不存在，给用户提示
          console.error('文件不存在或已被删除');
          // 这里可以替换成Angular的弹窗/通知组件，比如MatSnackBar
        } else {
          // 处理其他下载错误
          console.error('下载请求失败，请稍后重试');
        }
      }
    });
  }
}

注意：该方案需要后端API支持跨域请求（CORS），否则HEAD请求会被浏览器拦截。

方案二：通过iframe加载链接并监听错误 #

如果受限于跨域无法发送HEAD请求，可以动态创建iframe来加载下载链接，监听iframe的错误事件来捕获404：

downloadBuildFile(app: any, token: string): void {
  const downloadUrl = `${environment.urls.baseUrl}${this.fbApiConstants.API_URLS.private_build_url}?id=${app.build_id}&token=${token}`;

  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';

  // 监听iframe加载错误
  iframe.addEventListener('error', () => {
    console.error('文件不存在或已被删除');
    iframe.remove();
  });

  // 加载成功时，浏览器会触发下载，延迟移除iframe确保下载流程完成
  iframe.addEventListener('load', () => {
    setTimeout(() => iframe.remove(), 1500);
  });

  document.body.appendChild(iframe);
  iframe.src = downloadUrl;
}

优缺点说明：

• 方案一能精准判断HTTP状态码，可靠性更高，但依赖CORS配置；
• 方案二无需后端配合，但错误触发场景可能包含其他加载异常，判断精度略低。

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