Angular2 cross domain http get

Question

我试图从远程服务器获取JSON文件。我编写了以下模块:

import { Component }               from '@angular/core';
import { Injectable }              from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable }              from 'rxjs/Observable';
import './rxjs-operators';

@Component({
    selector: 'map',
    templateUrl: 'map/map.component.html'
})
@Injectable()
export class MapComponent{
    private properties;
    constructor(private http: Http){
        this.properties = null;
    }
    ngOnInit(){
        this.getPropertiesInTheArea();
    }
    getPropertiesInTheArea(){
        let url = "https://raw.githubusercontent.com/sdeering/50-jquery-function-demos/cd89f8592b96d0a79c10aa64fa43c1bf01312643/data/data.json";
        this.http.get(url)
                .map(response => response.json())
                .subscribe(
                    data => this.properties = data,
                    err => console.error(err),
                    () => console.log("Properties fetchednn" + JSON.stringify(this.properties))
                );
    }
}

这个模块可以完美地获取本地JSON文件:

let url = "http://localhost:3000/map/data.json";

但是对于远程资源(例如在raw.githubusercontent.com上)，我进入控制台:

"例外:[例外……" nsresult: "0x805e0006 ()" location: "JS frame:: http://localhost:3000/node_modules/zone.js/dist/zone.js:: scheduleTask:: line 1241" data: no]"

未处理的承诺拒绝:异常{消息:"，结果:2153644038，名称:"，文件名:"http://localhost:3000/node_modules/…"，lineNumber: 1241, columnNumber: 0，数据:null，堆栈:" scheduletask@http://localhost:3000/…"};区域:;任务:承诺。然后;取值范围:异常{message: "， result: 2153644038, name: "， filename: "http://localhost:3000/node_modules/…"，lineNumber: 1241, columnNumber: 0, data: null, stack: "scheduleTask@http://localhost:3000/…"}undefined

Thanks to lot

Answer 1

我猜这是Angular2。

我认为你有CORS问题。检查你的开发工具中的网络选项卡。

无法从其他服务器获取数据。(除非其他服务器支持jsonp或返回正确的访问控制头)。这可能在本地工作，因为你的应用程序也从本地主机。