2017-04-18 8 views
1

옐프의 API에 이온 2 앱을 연결하려고합니다. 지금은 CLI에서 생성되고 내 localhost에서 실행되는 빈 Ionic 2 응용 프로그램을 사용하고 있습니다.이오닉 2 옐프 API

내 코드 :

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { ErrorHandler, NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 

import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage 
    ], 
    providers: [ 
    StatusBar, 
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler} 
    ] 
}) 
export class AppModule {} 

home.ts

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

@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 someString'); 
    var options = new RequestOptions({headers: headers}); 

    this.http.get('https://api.yelp.com/v3/businesses/search?term=deli20&latitude=39.59754&longitude=-104.872934', options).map(res => res.json()).subscribe(data => { 
     this.restaurants = data.data.children; 
     console.log(this.restaurants); 
    }); 
    } 



} 

home.html

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    The world is your oyster. 
    <p> 
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
    </p> 
    <!--Just using Ionic 2's default home page, just wanna output my JSON to the console for now.--> 
</ion-content> 

페이지는 correc 렌더링 TLY,하지만 난 콘솔에서 얻을 오류 : "리소스를로드하지 못했습니다 : 프리 플라이트 응답은 성공하지"나는 누락 될 수 있습니다 무엇에

{"error": {"code": "TOKEN_MISSING", "description": "An access token must be supplied in order to use this endpoint."}} 

어떤 생각

응답은 다음과 같습니다?

+0

HTTP 헤더에 액세스 토큰을 제공해야합니다. 자세한 내용은 여기를 참조하십시오. https://github.com/Yelp/yelp-fusion/issues/45 – NickyTheWrench

+0

그게 내가 생각한 것입니다. with : var headers = new 헤더(); headers.append ('Authorization', 'Bearer someString'); var options = new RequestOptions ({헤더 : 헤더}); – user3183717

+0

"someString"을 실제 토큰으로 바꾸시겠습니까? – NickyTheWrench

답변

0

브라우저에이 chrome plugin을 추가하고 전원을 켜고 페이지를 다시로드하십시오. 괜찮습니다.

+0

솔루션에 대한 링크는 환영하지만, 답변이 없으면 유용한 답변입니다. [링크의 문맥을 추가하십시오] (http://meta.stackexchange.com/a/8259) 동료 사용자가 어떤 아이디어를 얻을 수 있도록하십시오. 그 이유는 무엇이며, 그 이유는 대상 페이지를 사용할 수 없을 때 링크하려는 페이지의 가장 중요한 부분을 인용하십시오. [링크 이상의 답변은 삭제 될 수 있습니다] (http://stackoverflow.com/help/deleted-answers). – mrun