Question

我在我的Ionic3.4 App中集成了Instagram身份验证。成功登录后，我将从身份验证响应中存储用户的令牌和UID。接下来，我向Instagram Endpoint发出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>

现在， main.js 在第60951行附近如下所示：

PS：

如果你想知道离子信息

$ ionic info

全球套餐：

@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不允许使用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')
        );
    }
  }
}

iOS：Instagram Api抛出错误消息

1 个答案: