离子 3 - Yelp API答案

【问题标题】：Ionic 3 - Yelp API离子 3 - Yelp API
【发布时间】：2018-05-10 18:55:56
【问题描述】：

我创建了一个全新的Ionic 项目来运行此代码。它在 Postman 中运行良好，但是当我运行 ionic serve 时出现错误。

home.ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http, Headers, RequestOptions, HttpModule } from '@angular/http';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  restaurants: any;

  constructor(public navCtrl: NavController, public http: Http) {
    var headers = new Headers();
    headers.append('Authorization', 'Bearer XX');
    var options = new RequestOptions({headers: headers});

    this.http.get('https://api.yelp.com/v3/businesses/search?latitude=XX&longitude=XX&radius=10000&categories=food&locale=en_NZ', options).map(res => res.json()).subscribe(data => {
        this.restaurants = data.data.children;
        console.log(this.restaurants);
    });
  }

}

当我运行 ionic serve 时，我在控制台中看到以下错误：

【问题讨论】：

我认为它与 CORS 问题有关，请查看此答案stackoverflow.com/questions/49170019/…
谢谢。明天我会尽快检查一下。

标签： ionic-framework ionic3 yelp

【解决方案1】：

对于ionic serve，您可以使用 Chrome 插件：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en 或任何其他插件。

在任何情况下，您还需要将 Yelp API 地址添加到您的 index.html 以处理 CSP。在此处查看有关 CSP 的信息：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/

【讨论】：