找不到 URL 的 Angular 2 HTTP GET 404

Question

我正在尝试将 Angular 2 应用程序与 Java Spring Boot 后端集成。目前，我将我的 Angular 2 文件放在 src/main/resources/static 下(意味着 Angular 和 Spring 应用程序都在同一端口上的同一应用程序中运行)。

我正在尝试像这样执行 HTTP GET:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Language } from '../model/language';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class LanguageService {

    constructor(private http: Http) { }

    private langUrl = 'api/languages'; 

    getLanguages() : Observable<Language[]> {
         return this.http.get(this.langUrl)
                         .map((res:Response) => res.json())
     }
}

我有意从 get 中删除了错误处理代码，因为它会导致误导性错误。我得到的是:

Error: Uncaught (in promise): Error: Error in :0:0 caused by: Response with status: 404 Not Found for URL: api/languages
Error: Error in :0:0 caused by: Response with status: 404 Not Found for URL: api/languages
    at ViewWrappedError.BaseError [as constructor] (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:1179:31) [angular]
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:1232:20) [angular]
    at new ViewWrappedError (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:6552:20) [angular]
//more output here - will provide full stack trace if needed

URL http://localhost:8080/api/languages 由 Java Spring Controller 处理，如果我通过 Postman 或 Web 浏览器执行 GET，它会起作用。

我的印象是 404 错误不是来自服务器，因为:

• 我在服务器日志中没有看到任何事件
• 无论服务器端是启动还是关闭，我都会得到相同的结果。

我认为我的 Angular 2 配置有问题，但我没有在文档中找到任何提示。

我尝试了不同的 url，例如 http://localhost:8080/api/languages、/api/languages、api/languages , another/working/server/endpoint - 都会导致相同的错误。

我什至尝试按照描述使用 JSONP here ，但我遇到了一个不同的问题，即 JSONP 未注入(inject)语言服务构造函数(我猜这个问题是另一个主题)。

我找到了 similar question , 但到目前为止从未得到答复。

如果您对如何解决此问题有任何想法或遇到过类似问题 - 我们将不胜感激任何帮助或评论。

谢谢

Answer 1

这个错误的原因是我用了Angular Tour of Heroes应用程序作为我的基础，我没有删除依赖

 "angular-in-memory-web-api": "~0.2.4",

和来自 app.module.ts 的 InMemoryWebApiModule。因此，所有请求都被 InMemoryWebApiModule 拦截(尽管我没有像英雄之旅教程中描述的那样直接调用它)，这就是为什么我在浏览器调试器的“网络”选项卡中没有看到任何 XMLHttpRequests 的原因。

我把package.json和node_modules目录下的依赖去掉后，就可以正常运行了，但是我不得不改服务代码直接解析Json为像这样的 TypeScript 对象:

getLanguages(): Promise<Language[]> {
    return this.http.get(this.langUrl)
        .toPromise()
        .then(response => response.json() as Language[])
        .catch(this.handleError);
}

这是一个新手错误，但我希望这篇文章能为某人节省几个小时的研究时间。