AngularJS 5新标签页预览文件失败及两次GET请求问题排查

让我们一步步拆解你的问题，逐个解决：

1. Angular调用进入错误分支的核心原因：响应解析失败 #

你的Angular HttpClient.get 默认会把服务端返回的响应解析为JSON格式，但你的WebAPI返回的是PDF文件的二进制流，这就导致Angular尝试将二进制数据解析成JSON时直接失败，触发了handleError。这也是为什么Postman和Chrome开发者工具能正常预览（它们不会自动解析为JSON），但Angular调用报错的关键原因。

修复方法：修改FileService的请求配置 #

更新view方法，指定responseType: 'blob'，告诉Angular这是二进制文件流，不要解析为JSON：

view(id): Observable<Blob> {
  return this._http.get<Blob>(`${this.baseUrl}example/document/${id}`, {
    responseType: 'blob' as 'json' // 类型断言用于绕过TypeScript类型检查
  }).pipe(
    catchError(this.handleError) // Angular 5+推荐使用pipe+catchError替代链式catch方法
  );
}

同时，更新handleError方法适配新的响应逻辑，并且遵循Angular 5+的RxJS规范：

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

// ...

handleError(error: HttpErrorResponse) {
  let errorMessage = 'Unknown error!';
  if (error.error instanceof ErrorEvent) {
    // 客户端或网络层面的错误
    errorMessage = `Error: ${error.error.message}`;
  } else {
    // 服务端返回的错误信息
    errorMessage = `Error Code: ${error.status}\nMessage: ${error.error}`;
    console.error(`Backend returned code ${error.status}, body was:`, error.error);
  }
  console.error(errorMessage);
  return throwError(() => new Error(errorMessage));
}

2. 控制器代码的语法错误 #

你的viewFile方法里，subscribe的错误回调括号位置错误，导致错误回调没有被正确绑定到订阅上。同时因为现在返回的是Blob流，打开方式也需要调整：

viewFile(index) {
  this.FileService.view("f819f948-b5dd-4478-ad69-b0e610627375").subscribe(
    (response) => {
      // 通过Blob创建临时URL用于预览
      const fileUrl = URL.createObjectURL(response);
      window.open(fileUrl, '_blank');
      // 延迟释放临时URL，避免内存泄漏
      setTimeout(() => URL.revokeObjectURL(fileUrl), 1000);
    },
    (error) => {
      console.log('Error occurred:', error);
    }
  );
}

3. 两次请求的原因：CORS预检请求 #

你看到的两次请求，大概率是**浏览器的CORS预检请求（OPTIONS）**加上实际的GET请求。当你的前端和服务端跨域，且请求携带了Authorization头时，浏览器会自动发送OPTIONS请求，询问服务端是否允许该跨域请求，这是浏览器的安全机制，属于正常行为。

如果确实是两次GET请求，需要排查：

• 是否不小心重复调用了viewFile方法
• 服务端是否存在重定向逻辑，导致浏览器自动发起第二次GET请求

4. 服务端需要确认的配置 #

虽然Postman能正常调用，但为了确保Angular能正常处理，建议检查：

• CORS配置：确保服务端允许Authorization头，允许OPTIONS请求，并且设置了正确的Access-Control-Allow-Origin（可以临时设为*测试，上线后改为前端域名）
• 响应头：确认Content-Disposition的inline设置正确，Content-Type明确为application/pdf（可以手动指定，避免FileExtensionContentTypeProvider识别异常）
• 流处理：确保流被正确复制到响应体，并且完成了Response.Body.Flush()和流的释放操作，避免内存泄漏

调整后，你的Angular应用应该能正常获取文件流并在新标签页预览了。

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