Angular 2 HTTP GET 404 не найден для URL-адреса
Я пытаюсь интегрировать приложение Angular 2 с Java Spring Boot backend. На данный момент я помещаю файлы 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, и он работает, если я делаю GET через Postman или веб-браузер.
Мое впечатление, что ошибка 404 не поступала с сервера, потому что:
- Я не вижу активности в журналах сервера
- Я получаю тот же результат, независимо от того, идет ли серверная сторона вверх или вниз.
Я думаю, что что-то не так с моей конфигурацией Angular 2, но я не нашел никаких советов в документации.
Я пробовал разные URL-адреса, например http://localhost:8080/api/languages
, /api/languages
, api/languages
, another/working/server/endpoint
- все это приводит к той же ошибке.
Я даже пытался использовать JSONP, как описано здесь, но у меня возникла другая проблема, когда JSONP не был добавлен в конструктор языковой службы (эта проблема отличается тема, я думаю).
Я нашел аналогичный вопрос, но до сих пор он никогда не отвечал.
Если у вас есть идеи по устранению этой проблемы или возникли аналогичные проблемы - любая помощь или комментарий будут высоко оценены.
Спасибо
Ответы
Ответ 1
Причиной этой ошибки было то, что я использовал Angular Tour of Heroes в качестве основы для моего, и я не удалял зависимость
"angular-in-memory-web-api": "~0.2.4",
и InMemoryWebApiModule
из app.module.ts. Из-за этого все запросы были перехвачены InMemoryWebApiModule (несмотря на то, что я не называл это напрямую, как описано в учебном руководстве Tour of Heroes), поэтому я не видел никаких 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);
}
Это ошибка новичка, но я надеюсь, что этот пост спасет несколько часов исследований кому-то.
Ответ 2
У меня была аналогичная проблема, после некоторых разочаровывающих исследований я решил ошибку 404 благодаря this. Порядок импорта имеет значение.
Надеюсь, это поможет кому-то.
Ответ 3
В Chrome или Firefox вы можете видеть HTTP-запросы и ответы, выполняемые вашим приложением (просто нажмите F12 и выберите вкладку "Сеть" ). Поскольку вы говорите, что он работает с вашим браузером или почтовым отправителем, вы можете сравнить оба запроса и быстро найти разницу.