Angular中http.head请求资源返回404问题求助

你遇到的这个问题其实是Angular CLI开发服务器（基于webpack-dev-server）的特性导致的：它默认不支持对静态资源的HEAD请求处理，但GET请求却能正常获取内容。另外，GET请求出现的解析错误，则是因为HttpClient默认期望响应为JSON格式，而PDF是二进制内容，自然会触发解析失败。

下面给你几个实用的解决方案：

方案一：改用GET请求并指定响应类型 #

既然GET能正常拿到资源，我们可以调整请求配置，让HttpClient跳过JSON解析，同时通过请求的成功/失败状态判断文件是否存在：

import { of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

fileExists(path: string): Observable<boolean> {
  return this.http.get(path, { 
    responseType: 'blob', // 指定响应为二进制类型，避免JSON解析报错
    observe: 'response'  // 可选：获取完整响应对象，方便自定义状态判断
  }).pipe(
    map(() => true), // 请求成功则判定文件存在
    catchError((error) => {
      console.log(error);
      return of(false); // 请求失败则判定文件不存在
    })
  );
}

这个方案简单直接，不需要修改服务器配置，在开发和生产环境都能稳定工作。

方案二：用浏览器原生fetch API处理HEAD请求 #

如果一定要保留HEAD请求的逻辑，可以试试浏览器原生的fetch API（绕开Angular HttpClient的封装），它在开发环境下能被webpack-dev-server正确处理：

import { from } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

fileExists(path: string): Observable<boolean> {
  return from(fetch(path, { method: 'HEAD' })).pipe(
    map(response => response.ok), // 响应状态码在200-299区间则返回true
    catchError(() => of(false))
  );
}

HEAD请求本身不需要处理响应体，刚好契合你检查文件是否存在的需求。

方案三：修改Angular CLI开发服务器配置（进阶） #

如果坚持要用Angular HttpClient的HEAD请求，你需要自定义webpack-dev-server的配置，让它支持HEAD请求。可以通过创建自定义webpack.config.js文件，或者在angular.json的serve配置中添加devServer参数：

不过这个方案仅针对开发环境，生产环境（如Nginx等服务器）默认支持HEAD请求，所以除非有特殊需求，一般不推荐这种复杂的方式。

补充说明 #

你遇到的GET请求解析错误，核心原因是HttpClient默认将响应解析为JSON，而PDF文件开头的%PDF字符不符合JSON格式，因此触发了解析异常。只要设置responseType为'blob'、'text'或'arraybuffer'，就能避免这个问题。

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