Angular 2 http 请求播放 REST 服务器

Question

我正在实现一个 Angular 2 服务，它通过 http 请求从播放框架服务器获取 JSON 数据。

http://localhost:9000/read 返回 JSON 数据，例如 [{"id":1,"name":"name1"},{"id":2,"name":"name2"}]。

这是我的 Angular 服务代码（来自本教程 https://angular.io/docs/ts/latest/guide/server-communication.html）：

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Hero }           from './hero';
import { Observable }     from 'rxjs/Observable';
@Injectable()
export class HttpService {
private heroesUrl = "http:localhost:9000/read";  // URL to web API
constructor (private http: Http) {}
getHeroes (): Observable<Hero[]> {
return this.http.get(this.heroesUrl)
                .map(this.extractData)
                .catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
  const body = error.json() || '';
  const err = body.error || JSON.stringify(body);
  errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
  errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}

但是浏览器中的请求是这样的：

GET XHR http://localhost:4200/localhost:9000/read [HTTP/1.1 404 Not Found 5ms]

因此，当需要绝对 URL 时，Angular 会创建相对 URL。 我也可以...

1)在代码中修复它。

2)或者让 Angular 2 和 Play 在同一个端口上运行。

3) 使用 JSONP 或其他方式。

Answer 1

您的相对网址的原因仅仅是因为您有一个错字，这导致了这种情况。而不是

private heroesUrl = "http:localhost:9000/read";

应该是

private heroesUrl = "http://localhost:9000/read";

这里可能不需要其他魔法。您可能会遇到 cors 问题。但由于这是一个游乐场，而不是实际的开发，因此对于 CORS，您可以在 chrome 中轻松启用 CORS。但这自然不推荐在现实生活中的应用程序中使用。但是玩起来就很好了。