使用 Angular 访问 Flickr API 时出现 CORS 错误 [重复]

Posted 2023-03-04

【中文标题】使用 Angular 访问 Flickr API 时出现 CORS 错误 [重复]

【英文标题】：CORS error when access Flickr API using Angular [duplicate]

【发布时间】：2020-03-05 16:00:33

【问题描述】：

我正在开发一个 Angular 应用程序，我在其中使用 Flickr API 获取专辑和照片的列表。 下面是我为使用 Flickr API 而创建的服务

import  Injectable  from '@angular/core';
import  HttpClient, HttpHeaders  from '@angular/common/http';
import  GlobalsService  from './globals.service';
import * as Rx from 'rxjs';

interface Response 
  photosets: PhotoSets;


interface PhotoSets 
  page: number;
  pages: number;
  photoset: PhotoSet[];
  length: number;


interface PhotoSet 
  id: string;
  description: String;
  title: String;


interface String 
  _content: string;


interface PhotoSetByIds 
  photoset: PhotoSetById;


interface PhotoSetById 
  id: string;
  owner: string;
  ownername: string;
  page: number;
  pages: number;
  per_page: number;
  perpage: number;
  photo: Photo[];
  primary: string;
  title: string;
  total: string;


interface Photo 
  length: number;
  farm: number;
  id: string;
  isfamily: number;
  isfriend: number;
  ispramy: string;
  ispublic: number;
  secret: string;
  server: string;
  title: string;


@Injectable(
  providedIn: 'root'
)
export class FlickrServiceService 
  constructor(private http: HttpClient, private globals: GlobalsService) 
  

  getPhotoSets() 
    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'
    );
  

  getPhotos(photosetId: any) 
    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'
    );
  

问题是，当我尝试获取某些内容时出现以下 CORS 错误：

从源“http://localhost:4200”访问位于“https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=”的 XMLHttpRequest&user_id=&format=json&nojsoncallback=1' 已被 CORS 策略阻止：请求标头字段Access-Control-Allow-Headers 在预检响应中不允许授权。 core.js:4002 错误 HttpErrorResponse headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://api.flickr.com/services/rest/?method=flick...ser_id=170538248@N08&format=json&nojsoncallback=1", ok: false, ...

我仍然不知道如何解决这个问题。有什么帮助吗？谢谢！

【参考方案1】：

在app.module.ts中导入HttpClientModule、HttpClientJsonpModule

import  HttpClientModule, HttpClientJsonpModule  from '@angular/common/http';

@NgModule(
  imports: [HttpClientJsonpModule, HttpClientModule]
)
export class AppModule  

在你的 FlickrService 中你应该使用 jsoncallback 而不是 nojsoncallback。

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';

@Injectable()
export class PhotoService 

imagesUrl = `https://api.flickr.com/services/....../format=json&jsoncallback=JSONP_CALLBACK`;

  constructor(private http: HttpClient)  

  getPhotos() 
    return  this.http.jsonp(this.imagesUrl, 'JSONP_CALLBACK');
  

终于在你的组件中，

import  FlickrService  from './flickr.service';
export class PhotosComponent  

  photoArray: any[];

  constructor(private flickrService: FlickrService)  
  

  ngOnInit() 
    this.flickrService.getPhotos()
      .subscribe((res: any) => this.photoArray = res.items);
  

希望这会对你有所帮助。