Angular拦截器导致图片上传失败，请求技术解决方案

你的拦截器会给所有HTTP请求自动添加Authorization: Bearer <token>请求头，但Cloudinary的图片上传接口不需要这个认证头，额外的请求头导致Cloudinary拒绝了你的上传请求，这就是添加拦截器后上传失败的核心原因。

修改拦截器代码，让它跳过Cloudinary的上传请求，不添加认证头：

intercept(req: any, next: any) {
  // 检测请求目标是否是Cloudinary接口，是的话直接放行，不添加认证头
  if (req.url.includes('api.cloudinary.com')) {
    return next.handle(req);
  }

  let authService = this.injector.get(AuthService);
  let tokenizedReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${authService.getToken()}`,
    },
  });
  return next.handle(tokenizedReq);
}

如果你还有其他FormData类型的上传请求也不需要认证头，可以改成判断请求体类型来放行：

intercept(req: any, next: any) {
  // 若请求体是FormData，直接放行不添加认证头
  if (req.body instanceof FormData) {
    return next.handle(req);
  }

  let authService = this.injector.get(AuthService);
  let tokenizedReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${authService.getToken()}`,
    },
  });
  return next.handle(tokenizedReq);
}

Cloudinary的上传接口仅要求你在FormData中携带file和upload_preset参数，不需要额外的Bearer认证信息。拦截器自动添加的认证头属于多余的请求内容，触发了Cloudinary的请求校验逻辑，导致上传失败。

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