Angular调用Flickr API时出现CORS错误，求解决方法

看起来你遇到的是典型的跨域请求（CORS）问题，错误提示里明确提到Request header field authorization is not allowed by Access-Control-Allow-Headers——也就是说，你的请求自动带上了Authorization请求头，但Flickr的API服务器并没有在CORS配置中允许这个头，所以浏览器拦截了请求。下面是几种可行的解决方案：

1. 检查全局HTTP拦截器（最可能的原因） #

很多Angular项目会配置全局的HttpInterceptor，用来给所有请求自动添加Authorization头（比如用于后端API的身份验证）。但这个头会被自动附加到Flickr的API请求上，而Flickr的服务器不允许这个头，就触发了CORS错误。

解决方法：在拦截器中排除Flickr的API请求 #

如果你有类似这样的拦截器：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 原来的代码：给所有请求加Authorization头
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer your-token')
    });
    return next.handle(authReq);
  }
}

修改它，让Flickr的API请求跳过这个头的添加：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 检查请求是否指向Flickr API，是的话直接转发原请求
  if (req.url.includes('api.flickr.com')) {
    return next.handle(req);
  }

  // 其他请求继续添加Authorization头
  const authReq = req.clone({
    headers: req.headers.set('Authorization', 'Bearer your-token')
  });
  return next.handle(authReq);
}

2. 显式控制请求头，避免发送Authorization头 #

如果没有全局拦截器，那可能是HttpClient的默认配置无意中带上了这个头。你可以显式设置请求头，只保留必要的字段：

修改你FlickrServiceService中的请求方法：

getPhotoSets() {
  // 只设置必要的请求头，不要包含Authorization
  const headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });

  return this.http.get<Response>(
    `https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=${this.globals.apiKey}&user_id=${this.globals.userId}&format=json&nojsoncallback=1`,
    { headers }
  );
}

getPhotos(photosetId: any) {
  const headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });

  return this.http.get<PhotoSetByIds>(
    `https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=${this.globals.apiKey}&photoset_id=${photosetId}&user_id=${this.globals.userId}&format=json&nojsoncallback=1`,
    { headers }
  );
}

3. 使用Angular代理服务器绕过CORS #

如果上面的方法都不生效，可以通过Angular的开发代理来转发请求，这样浏览器只会和本地服务器通信，避免跨域问题：

步骤1：创建代理配置文件 #

在项目根目录新建proxy.conf.json，内容如下：

{
  "/flickr-proxy": {
    "target": "https://api.flickr.com",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/flickr-proxy": ""
    }
  }
}

步骤2：配置Angular开发服务器 #

打开angular.json，找到serve选项，添加proxyConfig：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "proxyConfig": "proxy.conf.json"
  },
  // 其他配置...
}

步骤3：修改请求URL #

更新FlickrServiceService中的请求地址，使用代理路径：

getPhotoSets() {
  return this.http.get<Response>(
    `/flickr-proxy/services/rest/?method=flickr.photosets.getList&api_key=${this.globals.apiKey}&user_id=${this.globals.userId}&format=json&nojsoncallback=1`
  );
}

getPhotos(photosetId: any) {
  return this.http.get<PhotoSetByIds>(
    `/flickr-proxy/services/rest/?method=flickr.photosets.getPhotos&api_key=${this.globals.apiKey}&photoset_id=${photosetId}&user_id=${this.globals.userId}&format=json&nojsoncallback=1`
  );
}

步骤4：重启开发服务器 #

关闭当前的ng serve，重新启动，代理就会生效了。

内容的提问来源于stack exchange，提问作者José Paulino