Конфигурация прокси не работала с angular CLI

117
14

8080 - Порт, где размещается бэкэнд
4200 - интерфейс Angular2


В проекте My Angular2 у меня есть файл proxy.config.json с контентом вроде этого


{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": "true",
"pathRewrite": {"^/api": ""}
}
}

В Angular2 package.json Я изменил процедуру запуска на "start": "ng serve --proxy-config proxy.config.json"
Когда я набираю внутри commander npm start, то в начале я вижу, что созданный прокси:/api → http://localhost:8080. Хорошо, до сих пор хорошо, я думаю.


Я пытаюсь отправить запрос (Angular2)


  constructor(private http: Http) {
this.getUsers();
}

getUsers(): any {
return this.http.get("/api/getusers")
.subscribe(response => {
console.log(response);
})
}


Im получает сообщение об ошибке http://localhost:4200/api/getusers 404 (не найдено). Как мы видим, ничего не было проксировано. Зачем? Я сделал что-то не так?


Консольный вывод визуального кода студии


 10% building modules 2/2 modules 0 active[HPM] Proxy created: /api/  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
Hash: d102bcd0909a1776c844
Time: 27041ms
chunk {0} main.bundle.js, main.bundle.map (main) 13.6 kB {2} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.map (styles) 130 kB {3} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.87 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
[HPM] Rewriting path from "/api/getusers" to "/getusers"
[HPM] GET /api/getusers ~> http://localhost:8080

Это ответ консоли браузера:


GET http://localhost:4200/api/getusers 404 (Not Found)
error_handler.js:54 EXCEPTION: Response with status: 404 Not Found for URL: http://localhost:4200/api/getusers
Subscriber.js:238 Uncaught Response {_body: "<html><head><title>Apache Tomcat/7.0.47 - Error re…hade"><h3>Apache Tomcat/7.0.47</h3></body></html>", status: 404, ok: false, statusText: "Not Found", headers: Headers…}

спросил(а) 2017-02-20T10:32:00+03:00 3 года, 9 месяцев назад
1
Решение
71

Я пробовал этот путь.
Мой файл proxy.conf.json выглядит следующим образом:


{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": "true",
"pathRewrite": {"^/api": ""}
}
}

и я заменил "start": "ng serve" на этот "start": "ng serve --proxy-config proxy.conf.json" в package.json

Мой файл app.component.ts выглядит следующим образом:


  constructor(private http: Http) {
this.getUsers();
}

getUsers(): any {
return this.http.get("http://localhost:4200/api/getusers")
.subscribe(response => {
console.log(response);

})
}


в моем API он предоставляет набор пользователей из http://localhost:8080/getusersURL


ответил(а) 2017-02-20T22:18:00+03:00 3 года, 9 месяцев назад
-4

Try

{ "/api/*": {    "target": " http://localhost:8080",    "secure": false }
}

ответил(а) 2018-01-09T20:42:00+03:00 2 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема