javascript - 错误 :0:0 caused by: Response with status: 0 for URL: null Angular 2. 0 问题

Question

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

因此，我使用 ngserve --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 文件夹中。

在我的组件中，我这样做:

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

但它显示错误:

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

如果是这样，

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

错误显示:

如何解决错误并使我的应用程序正常运行？

Answer 1

错误信息

XMLHttpRequest can not load file://.... Cross Origin Requests are only supported for protocol schemes http, data, chrome, chrome-extension, https.

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

具体来说，对不同 origin 的 URL 的任何请求需要 special permission请求的 URL，并且没有为 file:// URL 授予此类权限。

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