Ionic 3调用Yelp API报错：Postman正常Ionic Serve运行出错

Hey there! I see you're having trouble getting the Yelp API to work in your Ionic app even though it runs perfectly in Postman. Let's break down the issues and fix them step by step.

First: The CORS Block Issue #

The error in your screenshot is almost certainly a CORS (Cross-Origin Resource Sharing) restriction. Browsers enforce same-origin policy, which stops frontend apps from directly calling external APIs like Yelp's. Postman doesn't have this limitation, which is why it works there.

Here are two reliable fixes:

• Option 1: Use Ionic's Proxy (Quickest for Development)
  Open your project's ionic.config.json file and add this proxy configuration:

  {
    "name": "your-app-name",
    "integrations": {},
    "type": "angular",
    "proxies": [
      {
        "path": "/yelp-api",
        "proxyUrl": "https://api.yelp.com/v3"
      }
    ]
  }
  

  Then update your API call URL in home.ts to use the proxy path:

  this.http.get('/yelp-api/businesses/search?latitude=XX&longitude=XX&radius=10000&categories=food&locale=en_NZ', options)
  

  Restart ionic serve after making this change—this routes your request through Ionic's server, bypassing the CORS block.

• Option 2: Use a Backend Middleman (Better for Production)
  For a production-ready app, set up a simple backend (like a Node.js server) that calls the Yelp API on your app's behalf. Your Ionic app will then call your own backend, which avoids CORS issues entirely.

Second: Fix the Response Data Parsing #

Yelp's API returns business data in the businesses field, not data.children like you have in your code. That line will leave this.restaurants as undefined. Update it to:

this.restaurants = data.businesses;

Third: Upgrade to HttpClient (Cleaner, Modern Code) #

You're using the old Http module from @angular/http—Ionic now recommends HttpClient from @angular/common/http, which automatically parses JSON responses (so you don't need .map(res => res.json())). Here's your cleaned-up, updated code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  restaurants: any[] = []; // Initialize to avoid undefined issues
  constructor(public navCtrl: NavController, public http: HttpClient) {
    const headers = new HttpHeaders({
      'Authorization': 'Bearer XX' // Replace with your valid Yelp API token
    });
    // Using proxy URL + params object for cleaner, more maintainable code
    this.http.get('/yelp-api/businesses/search', {
      headers: headers,
      params: {
        latitude: 'XX', // Replace with real latitude
        longitude: 'XX', // Replace with real longitude
        radius: '10000',
        categories: 'food',
        locale: 'en_NZ'
      }
    }).subscribe(data => {
      this.restaurants = data['businesses'];
      console.log(this.restaurants);
    }, error => {
      // Add error handling to debug issues quickly
      console.error('Request failed:', error);
    });
  }
}

Final Checks #

• Double-check that your Yelp API token is valid and hasn't expired
• Restart ionic serve after making any config or code changes
• If using the proxy, confirm ionic.config.json is saved correctly

内容的提问来源于stack exchange，提问作者Josh