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 fetched\n\n" + JSON.stringify(this.properties))
                );
    }

}

此模块可以完美地获取本地JSON文件：

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

但对于远程资源（例如，在raw.githubusercontent.com上），我进入控制台：

“EXCEPTION：[Exception ...”“nsresult：”0x805e0006（）“location：”JS frame :: http://localhost:3000/node_modules/zone.js/dist/zone.js :: scheduleTask :: line 1241“data：no]”

未处理的承诺拒绝：异常{message：“”，result：2153644038，name：“”，filename：“http://localhost:3000/node_modules/ ...”，lineNumber：1241，columnNumber：0，data：null，stack：“scheduleTask @ http://localhost:3000/ ...“};区域：;任务：Promise.then;值：异常{message：“”，result：2153644038，name：“”，filename：“http://localhost:3000/node_modules/ ...”，lineNumber：1241，columnNumber：0，data：null，stack：“scheduleTask @ {{3} } ...“} undefined

非常感谢

Answer 1

这是我认为的Angular2。

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

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

Angular2跨域http获取

1 个答案: