错误：0：0导致：响应状态：0表示URL：null Angular 2.0 Issue

Question

我是Angular 2.0新手，我正在尝试使用@angular\cli构建示例应用。

因此，我使用ng serve --open在localhost:4200中提供应用程序。

现在，我有一个名为example.service.ts的服务，代码如下：

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable() //Decorator

export class ExampleService {
    private _url : string = "file:///Users/chiranjib/Documents/Angular%202%20Tutorial/ninja-app/apidata/employeedata.json";
    constructor(private _http : Http){}
    getEmployees(){
        return this._http.get(this._url)
            .map((response : Response) => response.json());
    }
}

文件employeedata.json位于本地的apidata文件夹中。

在我的component我这样做：

this._exampleService.getEmployees().subscribe((resEmployeeData) => this.employees = resEmployeeData);

但它显示错误：

即使在 firefox 中，错误仍然存​​在。

如果有，

private _url : string = "apidata/employeedata.json";

错误显示：

如何解决错误并让我的应用运行？

Answer 1

错误消息

  

XMLHttpRequest无法加载file://...。交叉源请求仅支持协议方案http，数据，chrome，chrome-extension，https。

表示浏览器出于安全原因拒绝从file://网址加载JSON。这是有道理的，因为如果允许网站读取用户硬盘上的文件，那将是一个隐私噩梦。

具体而言，对不同origin的网址的任何请求都需要special permission所请求的网址，并且不会对file://网址给予此类权限。

要解决此问题，您需要通过HTTP提供JSON（理想情况下来自同一主机和端口，因此它位于同一个源上）。在角度CLI中完成此操作的最简单方法是将其放入src/assets文件夹，然后从/assets/employeedata.json加载它。