Angular4中上传文件时移除HTTP拦截器设置的Content Type方法

这个场景我太熟悉了——全局拦截器统一配置确实省心，但碰到文件上传这种需要multipart/form-data的特殊请求，就得做针对性适配了。给你分享几个实用的解决方案：

方案一：通过请求体类型自动判断（推荐） #

文件上传请求通常会用FormData来封装数据，我们可以在拦截器里检查请求体是否为FormData实例，如果是就跳过Content-Type的设置，直接转发请求。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class ContentTypeInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 检测到是FormData（文件上传场景），跳过全局Content-Type设置
    if (req.body instanceof FormData) {
      return next.handle(req);
    }

    // 非文件上传请求，统一设置Content-Type为application/json
    const modifiedRequest = req.clone({
      setHeaders: {
        'Content-Type': 'application/json'
      }
    });
    return next.handle(modifiedRequest);
  }
}

这种方式最省心，不需要在上传请求里额外加配置，完全由拦截器自动识别场景。

方案二：在上传请求中手动覆盖Content-Type #

如果你不想修改拦截器，也可以在文件上传的POST请求里手动设置multipart/form-data，Angular的请求克隆机制会自动覆盖拦截器设置的header。

不过要注意：当你使用FormData时，浏览器会自动生成包含boundary的正确multipart/form-data头，手动设置可能会丢失boundary导致请求失败，所以这个方案只适合你确认需要手动指定的场景。

uploadFile(file: File) {
  const formData = new FormData();
  formData.append('uploadFile', file);

  this.http.post('/api/file/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).subscribe(res => {
    console.log('文件上传成功', res);
  });
}

方案三：用自定义标识告诉拦截器跳过设置 #

可以给文件上传请求加一个自定义的请求头（比如Skip-Global-Content-Type），拦截器检测到这个头时，就跳过全局Content-Type的设置，并且要记得移除这个自定义头，避免传递给后端服务。

拦截器代码： #

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class ContentTypeInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 检查是否存在自定义跳过标识
    if (req.headers.has('Skip-Global-Content-Type')) {
      // 移除自定义头，避免传到后端
      const modifiedReq = req.clone({
        headers: req.headers.delete('Skip-Global-Content-Type')
      });
      return next.handle(modifiedReq);
    }

    // 常规请求设置全局Content-Type
    const modifiedRequest = req.clone({
      setHeaders: {
        'Content-Type': 'application/json'
      }
    });
    return next.handle(modifiedRequest);
  }
}

文件上传请求代码： #

uploadFile(file: File) {
  const formData = new FormData();
  formData.append('uploadFile', file);

  this.http.post('/api/file/upload', formData, {
    headers: {
      'Skip-Global-Content-Type': 'true'
    }
  }).subscribe(res => {
    console.log('文件上传成功', res);
  });
}

三个方案里，方案一的侵入性最低，也最符合常规的开发逻辑，优先推荐使用。

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