时间戳

首页 > 解决方案 > 离子 3 - Yelp API

ionic-framework - 离子 3 - Yelp API

问题描述

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

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 时，我在控制台中看到以下错误： 在此处输入图像描述

标签： ionic-frameworkionic3yelp

解决方案

您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/

推荐阅读