Ionic 3 - Yelp API

Question

I created a brand new Ionic project to run this code. It worked fine in Postman but when I run ionic serve I get an error.

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

}

When I run ionic serve, I see the following error in the console:

I think its related to CORS issue please check this answer https://stackoverflow.com/questions/49170019/ionic-3-response-with-status-0-for-url-null/49170633#49170633 — CodeChanger, May 10 '18 at 10:04

score 0 · Answer 1 · answered May 10 '18 at 10:55

For ionic serve you may use Chrome plugin: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en or any other.

In any case you will need also to add Yelp API address to your index.html to deal with CSP. See information about CSP here: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/

Ionic 3 - Yelp API

1 Answers1