Angular 2 HTTP GET 404 未找到 URL

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 控制器处理，如果我通过 Postman 或 Web 浏览器进行 GET，它就可以工作。

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

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

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

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

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

我找到了similar question，但至今无人回答。

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

谢谢

Answer 1

这个错误的原因是我使用Angular Tour of Heroesapplcation作为我的基础，我没有去掉依赖

 "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);
}

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

Answer 2

我遇到了类似的问题，经过一些令人沮丧的研究后，感谢this，我解决了 404 错误。导入顺序很重要。
希望它可以帮助某人。

Answer 3

在 Chrome 或 Firefox 中，您可以查看应用程序执行的 HTTP 请求和响应（只需按 F12 并选择“网络”选项卡）。由于您说它与您的浏览器或 Postman 配合使用，因此您可以比较这两个请求，并且应该很快找到不同之处。