iOS：Instagram Api 抛出错误消息

Question

我在 Ionic3.4 应用程序中集成了 Instagram 身份验证。成功登录后，我存储来自身份验证响应的用户令牌和 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 行附近如下所示：

PS：

如果您想了解离子信息

$ 离子信息

全局包：

@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 无法加载 https://api.instagram.com/v1/users/self/media/recent?access_token=XXXXXXXXXXXXXXXXX。 Access-Control-Allow-Origin 不允许 Origin null。

谁能提出解决方案？

Answer 1

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

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

然后，在导入数组中添加 JsonpModule 为：

@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')
        );
    }
  }
}