Angular4为存在并正在公开提供服务的json数据提供404 [英] Angular4 giving 404 for json data that exists and is publicly serving

问题描述

我有一个用Angular4编写的测试数据服务.当前看起来像这样:

I have a test data service written in Angular4. It currently looks like this:

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"，因为应用程序的这一部分基本上与教程代码完全相同(我更喜欢在构建新应用程序时拥有一些应该作为测试示例的已知工作示例) )...

With thanks to "The Net Ninja" for this code, as this section of the app is basically exactly the same as the tutorial code (I prefer to have something that should be a known working example for testing purposes when building new apps)...

问题是，尽管在 https://dinstruct-d4b62.firebaseio上肯定有测试数据. com/.json (据我所知，并没有以任何方式隐藏或防火墙(可通过浏览器直接访问))，当应用程序进入fetchData()函数时，它将记录:

The problem is that though there is definitely test data at https://dinstruct-d4b62.firebaseio.com/.json, which is not hidden or firewalled in any way as far as I can tell (directly accessible via browser), when the app enters the fetchData() function, it logs:

    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

在堆栈跟踪的开始.这可能是怎么回事?

at the start of the stack trace. What could be going on here?

更新:

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

I also noticed that in the calling function:

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));时，单击指向仪表板的链接，它会立即在浏览器地址栏中显示localhost:3000/dashboard，但是立即弹回到显示先前的URL.但是，当我删除此行时，应用程序将始终正确显示localhost:3000/dashboard.我认为这可能与console.logged 404错误有关.

When I have this.dataService.fetchData().subscribe((data) => console.log(data)); in the code, clicking a link to the dashboard it momentarily shows localhost:3000/dashboard in the browser address bar but then immediate flicks back to showing the previous URL. However, when I remove this line, the app correctly shows localhost:3000/dashboard the whole time. I assume this is probably related to the console.logged 404 error.

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

Also perplexing is that when I check the network traffic, no 404 is shown.

更新:

当可观察者变为诺言时，我会在控制台中获得以下输出:

When the observable is change to a promise I get this output in the console:

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.

There is still no 404 in the network traffic.

我现在将调用函数更新为此:

I have now updated the calling function to this:

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

推荐答案

in-memory-web-api将干扰您的外部"请求.您需要将其从NgModule中删除，因为否则Angular始终会尝试在内存Web API中查找您的请求，而该位置显然不存在该请求.因此，删除

The in-memory-web-api will interfere with your "outside" requests. You need to remove that from your NgModule, since otherwise Angular is always trying to look in in-memory-web-api for your requests, which obviously doesn't exist in that place. So removing the equivalent of

InMemoryWebApiModule.forRoot(InMemoryDataService)

从您的ngModule中

可以清除它！ :)

from your ngModule and that should clear it out! :)

这篇关于Angular4为存在并正在公开提供服务的json数据提供404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！