android - iOS:Instagram Api 抛出错误消息

Question

我在我的 Ionic3.4 应用程序中集成了 Instagram 身份验证。成功登录后，我从身份验证响应中存储用户的 token 和 UID。接下来，我对 Instagram 端点进行 api 调用以获取当前用户的照片。它在 Android 上完美运行。但它不适用于iOS平台。它抛出以下错误:

它应该像在 Android 中一样加载图像:

这是我用来从 Instagram 获取照片的代码:

InstagramService.ts:

@Injectable()
export class InstagramService {

  constructor(public http: Http) {

  }

  getInstagramUserInfo(accessToken) {
    //GET USER PHOTOS
    return this.http
      .get('https://api.instagram.com/v1/users/self/media/recent?access_token=' + accessToken)
      .map((res: Response) => res.json())
      .map((res: any) => {
        let images: Array<String> = [];
        res.data.forEach(element => {
          images.push(element.images.thumbnail.url);
        });
        return images;
      })
      .catch((error: any) =>
        Observable.throw(error.json().error || 'Server error')
      );
  }
}

instagram-photos.ts:

getInstagramPhotos(accessToken) {
    this.showLoading();
    this.instagramService.getInstagramUserInfo(accessToken)
        .subscribe((response: Array<string>) => {
            this.images = response;
            this.hideLoading();
        }, (error: any) => {
            alert(JSON.stringify(error));
            this.hideLoading();
        });
}

instagram-photos.html:

<ion-content padding="true">
    <ion-grid>
        <div *ngFor="let image of images; let i = index;">
            <ion-row *ngIf="i % 3 === 0">
                <ion-col col-4 (click)="openPhoto(image)" *ngIf="i < images.length">
                    <img [src]="images[i]" />
                </ion-col>
                <ion-col col-4 (click)="openPhoto(image)" *ngIf="i+1 < images.length">
                    <img [src]="images[i+1]" />
                </ion-col>
                <ion-col col-4 (click)="openPhoto(image)" *ngIf="i+2 < images.length">
                    <img [src]="images[i+2]" />
                </ion-col>
            </ion-row>
        </div>
    </ion-grid>
</ion-content>

现在，ma​​in.js 在第 60951 行附近看起来像下面这样:

附言:

如果您想了解 ionic 信息

$ ionic 信息

全局包:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

本地包:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

系统:

Node       : v6.11.0
OS         : macOS Sierra
Xcode      : Xcode 8.2.1 Build version 8C1002
ios-deploy : 1.9.1
ios-sim    : not installed
npm        : 3.10.10

编辑:1

我继续在 Safari 上调试应用程序，我在调用 api 时发现了这个问题:

XMLHttpRequest cannot load https://api.instagram.com/v1/users/self/media/recent?access_token=XXXXXXXXXXXXXXXXX. Origin null is not allowed by Access-Control-Allow-Origin.

谁能提出解决方案？

Answer 1

好的。我找到了解决方案。 Instagram API 支持 JSONP，所以当设备是 iOS 时，我进行了 jsonp 调用而不是 http 调用。我实现如下:首先，在 app.module.ts 中，将 JsonpModule 导入为:

import { JsonpModule } from '@angular/http';

然后，将 JsonpModule 添加到 imports 数组中:

@NgModule({
  declarations: [...],
  imports: [
    ...,
    JsonpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [...],
  providers: [...]
})

最后，我检查了如果平台是 android 则进行正常的 Http 调用，如果平台是 ios 则进行 Jsonp调用。就是这样...!!

import { Injectable } from '@angular/core';
import { Http, Response, Jsonp } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";
import { Platform } from "ionic-angular";

@Injectable()
export class InstagramService {

  constructor(private http: Http, private jsonp: Jsonp, private platform: Platform) {

  }

  getInstagramUserInfo(accessToken) {
    if (this.platform.is('android')) {
      return this.http
        .get('https://api.instagram.com/v1/users/self/media/recent?access_token=' + accessToken, {})
        .map((res: Response) => res.json())
        .map((res: any) => {
          let images: Array<String> = [];
          res.data.forEach(element => {
            images.push(element.images.thumbnail.url);
          });
          return images;
        })
        .catch((error: any) =>
          Observable.throw(error.json().error || 'Server error')
        );
    } else {
      return this.jsonp
        .get('https://api.instagram.com/v1/users/self/media/recent?access_token=' + accessToken + "&callback=JSONP_CALLBACK", {})
        .map((res: Response) => res.json())
        .map((res: any) => {
          let images: Array<String> = [];
          res.data.forEach(element => {
            images.push(element.images.thumbnail.url);
          });
          return images;
        })
        .catch((error: any) =>
          Observable.throw(error.json().error || 'Server error')
        );
    }
  }
}