前端直传Cloudinary遭遇CORS错误，相同代码他处可用求排查

我来帮你搞定这个CORS问题！你遇到的错误核心是预请求（preflight OPTIONS请求）里的Authorization头不被Cloudinary的CORS配置允许，虽然相同代码在朋友项目能跑，但你的环境肯定有差异，咱们一步步排查：

1. 排查Angular是否自动添加了Authorization头 #

Angular的HttpClient很可能通过全局HTTP拦截器给所有请求自动加上了Authorization头（比如项目里加了登录token的拦截器），而Cloudinary默认的CORS配置并不允许这个头，这就触发了错误。

• 检查项目里的HttpInterceptor实现：看看有没有类似auth.interceptor.ts的文件，里面是否给所有请求都添加了Authorization头。
• 如果有拦截器，给Cloudinary的请求放行：修改拦截器代码，判断请求URL是否指向Cloudinary，如果是就跳过添加授权头：

  import { Injectable } from '@angular/core';
  import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class AuthInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
      // 跳过Cloudinary的上传请求
      if (request.url.includes('api.cloudinary.com')) {
        return next.handle(request);
      }
  
      // 其他请求正常添加授权头
      const authRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${localStorage.getItem('token')}`
        }
      });
      return next.handle(authRequest);
    }
  }
  

2. 检查Cloudinary控制台的CORS配置 #

即使朋友的项目能用，你的Cloudinary账号的CORS配置可能不一样：

1. 登录Cloudinary控制台，进入Settings > Security > CORS Configuration
2. 确保你的本地域名http://localhost:4200在allowed_origins里，并且allowed_headers包含Authorization（如果确实需要这个头的话）
3. 示例配置（可以直接复制修改）：

   [
     {
       "allowed_origins": ["http://localhost:4200"],
       "allowed_methods": ["GET", "POST", "PUT"],
       "allowed_headers": ["Content-Type", "Authorization"],
       "exposed_headers": [],
       "max_age": 300
     }
   ]
   

4. 保存后等待几分钟让配置生效，再重新测试上传。

3. 显式清除请求中的Authorization头 #

如果不确定哪里加了这个头，可以在你的上传请求里显式清除它，确保预请求里不会带这个头：

import { HttpHeaders } from '@angular/common/http';

uploadPhotos() {
  this.coverPhotoFormData.append("file", this.coverPhotoFile);
  this.coverPhotoFormData.append("upload_preset", "[PresetName]");
  
  const req = new HttpRequest('POST', 'https://api.cloudinary.com/v1_1/[CloudName]/image/upload', this.coverPhotoFormData, {
    reportProgress: true,
    // 显式清除Authorization头
    headers: new HttpHeaders().delete('Authorization')
  });
  
  this.http.request(req).subscribe(event => {
    let total = 0;
    if (event.type === HttpEventType.UploadProgress) {
      const percentDone = Math.round(100 * event.loaded / event.total);
      console.log(percentDone)
    } else if (event instanceof HttpResponse) {
      // 处理上传完成逻辑
    }
  });
}

4. 验证预请求的请求头 #

打开浏览器开发者工具的Network面板，找到Cloudinary的OPTIONS预请求，查看Request Headers里是否有Authorization字段：

• 如果有，说明确实是这个头导致的CORS错误，按照上面的方法去掉即可；
• 如果没有，那可能是其他头的问题，但根据错误信息，大概率是Authorization的问题。

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