Angular4 为 json 存在且公开服务的数据提供 404

Question

我有一个用 Angular4 编写的测试数据服务。目前看起来像这样：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/toPromise'


@Injectable()
export class DataService {

  constructor(private http: Http) { }

fetchData(){
  return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json').map(
    (res) => res.json()).toPromise();
}

}

感谢 "The Net Ninja" 提供此代码，因为应用程序的这一部分基本上与教程代码完全相同（我更喜欢有一些应该是已知的工作示例，以便在构建时用于测试目的新应用）...

问题是，虽然在 https://dinstruct-d4b62.firebaseio.com/.json 肯定有测试数据，但据我所知（可通过浏览器直接访问），它没有以任何方式隐藏或受到防火墙保护，当应用程序进入 fetchData() 函数，它记录：

    ERROR Error: Uncaught (in promise): Error: Response with status: 404 Not Found for URL: https://dinstruct-d4b62.firebaseio.com/.json
Error: Response with status: 404 Not Found for URL: https://dinstruct-d4b62.firebaseio.com/.json

在堆栈跟踪的开头。这里可能发生了什么？

更新：

我还注意到在调用函数中：

ngOnInit(): void {
  this.customerService.getCustomers()
      .then(customers => this.customers = customers);
  this.dataService.fetchData().subscribe(
    (data) => console.log(data));
}

当我在代码中有 this.dataService.fetchData().subscribe((data) => console.log(data)); 时，在仪表板上单击 link 它会立即在浏览器地址栏中显示 localhost:3000/dashboard，但随后会立即返回显示上一个 URL。但是，当我删除此行时，应用程序始终正确显示 localhost:3000/dashboard。我认为这可能与 console.logged 404 错误有关。

同样令人困惑的是，当我检查网络流量时，没有显示 404。

更新：

当 observable 更改为 promise 时，我在控制台中得到以下输出：

Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}
headers
:
Headers
ok
:
false
status
:
404
statusText
:
"Not Found"
type
:
null
url
:
"https://dinstruct-d4b62.firebaseio.com/.json"
_body
:
Object
error
:
"Collection 'undefined' not found"
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function ()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()
__proto__
:
Body
constructor
:
function Response(responseOptions)
toString
:
function ()
__proto__
:
Object

网络流量仍然没有404。

我现在已经将调用函数更新为：

ngOnInit(): void {
  this.customerService.getCustomers()
      .then(customers => this.customers = customers);
  this.dataService.fetchData().then((data) => {
       console.log(data);
  })
       .catch((error) => console.error(error));
}

Answer 1

尝试导入 import 'rxjs/add/operator/toPromise'; 并在 fetchData() 函数中将 toPromise 添加到 http get 的末尾。

fetchData(){
    return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json').map(
    (res) => res.json()).toPromise();
}

您的调用函数应如下所示：

this.dataService.fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => console.error(error));

Answer 2

in-memory-web-api 会干扰您的 "outside" 请求。你需要从你的 NgModule 中删除它，否则 Angular 总是试图在内存网络中查找你的请求，这显然不存在于那个地方。所以删除相当于

InMemoryWebApiModule.forRoot(InMemoryDataService)

从你的 ngModule 中清除它！ :)

Answer 3

在 AppModule.ts 中你有导入[]，你会导入 HttpClientInMemoryWebApiModule 喜欢 =>

HttpClientInMemoryWebApiModule
    .forRoot(
      InMemoryService, { dataEncapsulation: false }
    ),

现在这里发生的是你的应用程序正在内存中的网络中搜索 public API API 只是为了解决这个问题只是告诉内存模块不要通过设置传递未知 Url true 来表现得像那样喜欢 =>

HttpClientInMemoryWebApiModule
    .forRoot(
      InMemoryService, { dataEncapsulation: false, passThruUnknownUrl: true }
    )

Angular4 为 json 存在且公开服务的数据提供 404

Angular4 giving 404 for json data that exists and is publicly serving

json

http-status-code-404

firebase

typescript

angular