Angular2 HTTP GET請求的結果爲404

Question

試圖運行一個簡單的HTTP GET調用在https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

這裏給出角2 +打字稿 ：https://angular.io/resources/live-examples/toh-6/ts/plnkr.html

private heroesUrl = 'http://www.mocky.io/v2/575ed63f1100004f1b2992f4'; // URL to web api 

    constructor(private http: Http) { } 

    getHeroes(): Promise<Hero[]> { 
    this.http.get(this.heroesUrl) 
       .toPromise() 
       .then(response => response.json().data) 
       .catch(this.handleError); 
    } 

我也試過我的本地服務器的URL，例如http://localhost:5000/api

但沒有任何工程和控制檯顯示

VM2510 hero.service.ts!transpiled:66 An error occurred Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…} 

完整例外

EXCEPTION: Error: Uncaught (in promise): [object Object] platform-browser.umd.js:962 EXCEPTION: Error: Uncaught (in promise): [object Object]BrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js@0.6.12?main=browser:327Zone.runGuarded @ zone.js@0.6.12?main=browser:233_loop_1 @ zone.js@0.6.12?main=browser:487drainMicroTaskQueue @ zone.js@0.6.12?main=browser:494ZoneTask.invoke @ zone.js@0.6.12?main=browser:426 platform-browser.umd.js:962 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3698(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js@0.6.12?main=browser:327Zone.runGuarded @ zone.js@0.6.12?main=browser:233_loop_1 @ zone.js@0.6.12?main=browser:487drainMicroTaskQueue @ zone.js@0.6.12?main=browser:494ZoneTask.invoke @ zone.js@0.6.12?main=browser:426 platform-browser.umd.js:962 Error: Uncaught (in promise): [object Object] at resolvePromise (zone.js@0.6.12?main=browser:538) at resolvePromise (zone.js@0.6.12?main=browser:523) at zone.js@0.6.12?main=browser:571 at ZoneDelegate.invokeTask (zone.js@0.6.12?main=browser:356) at Object.onInvokeTask (core.umd.js:6066) at ZoneDelegate.invokeTask (zone.js@0.6.12?main=browser:355) at Zone.runTask (zone.js@0.6.12?main=browser:256) at drainMicroTaskQueue (zone.js@0.6.12?main=browser:474) at XMLHttpRequest.ZoneTask.invoke (zone.js@0.6.12?main=browser:426)BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3699(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js@0.6.12?main=browser:327Zone.runGuarded @ zone.js@0.6.12?main=browser:233_loop_1 @ zone.js@0.6.12?main=browser:487drainMicroTaskQueue @ zone.js@0.6.12?main=browser:494ZoneTask.invoke @ zone.js@0.6.12?main=browser:426 zone.js@0.6.12?main=browser:461 Unhandled Promise rejection: Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…} ; Zone: angular ; Task: Promise.then ; Value: Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}consoleError @ zone.js@0.6.12?main=browser:461_loop_1 @ zone.js@0.6.12?main=browser:490drainMicroTaskQueue @ zone.js@0.6.12?main=browser:494ZoneTask.invoke @ zone.js@0.6.12?main=browser:426 zone.js@0.6.12?main=browser:463 Error: Uncaught (in promise): [object Object](…)

任何幫助將非常感激。

Answer 1

我剛剛從其他論壇和示例瞭解到，我們應該使用jsonp訪問跨域休息。 例如http://plnkr.co/edit/0dFCzRdmBwcT99WR5Lbd?p=preview

@Component

import {JSONP_PROVIDERS} from 'angular2/http'; 
... 
.. 
providers:[JSONP_PROVIDERS] 

在服務：

import {Jsonp, URLSearchParams} from 'angular2/http';