cli - proxy.conf.json angular 5

El proxy de CLI angular para backend no funciona

Question

https://github.com/angular/angular-cli#proxy-to-backend aquí hay una instrucción de cómo hacer proxy para backend. Hice todo paso a paso y aún las solicitudes no están representadas.

8080 - my Express backend 4200 - mi interfaz Angular2

En el proyecto Angular2 tengo el archivo proxy.cons.json con contenido como este:

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

En Angular2 package.json cambié el procedimiento de start a "start": "ng serve --proxy-config proxy.conf.json"

Cuando npm start dentro del comandante npm start , al principio puedo ver el Proxy created: /api -> http://localhost:8080 . Bueno, hasta ahora es bueno, supongo.

Estoy tratando de enviar una solicitud (Angular2)

 constructor(private http: Http) {
this.getAnswer();
}
getAnswer(): any {
return this.http.get("/api/hello")
.subscribe(response => {
console.log(response);
})
}

Recibo un error que http://localhost:4200/api/hello 404 (Not Found) . Como podemos ver, nada ha sido proxy. ¿Por qué? ¿Hice algo mal?

Para ser claro. Cuando voy manualmente a http://localhost:8080/hello , todo funciona bien. No hay nada que buscar en el lado del backend.

Answer 1

En MAC esto funciona para mí

Angular 4 ejecutando localhost: http://localhost:4200/

En package.json

"start": "ng serve --proxy-config proxy.config.json",

En proxy.config.json

Donde nuestro servidor de empresa sería reemplazado por una URL externa

{
"/v1": {
"target": "https://our-company-server.com:7002",
"secure": false,
"logLevel": "debug"
}
}

Donde una solicitud GET angular sería ...

this.http.get(''/v1/dashboard/client'', options).map...
// options are headers, params, etc...
// then .map the observable in this case.

Answer 2

¿Podrías probar con este?

{
"/api": {
"target": "http://url.com",
"secure": false,
"pathRewrite": {"^/api" : ""}
}
}

Esto funciona para mi,

** NG Live Development Server is running on http://localhost:4200. **
10% building modules 3/3 modules 0 active[HPM] Proxy created: /api -> http://ec2-xx-xx-xx-xx.ap-south-1.compute.amazonaws.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""

Answer 3

Esto estuvo cerca de trabajar para mí. También tuve que agregar

"changeOrigin": true,

Se muestra a continuación el proxy.conf.json completo:

{
"/proxy/*": {
"target": "https://url.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",
"pathRewrite": {"^/proxy" : ""}
}
}

Answer 4

Para aquellos que tienen un dominio localhost personalizado, consulte this solución

{
"/api/*": {
"target": "http://backend.site.example",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": "http://backend.site.example/api"
}
}
}

Answer 5

Tuve que hacer un pequeño ajuste basado en las respuestas anteriores, aunque ahora parece un poco extraño mirar la configuración.

Este es mi proxy.conf.json que se muestra a continuación:

{
"/api/*": {
"target": "https://url.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",
"pathRewrite": {"^/api" : "http://url.com/api"}
}
}

Básicamente, reescribí el camino por completo. Y funciona ahora.

Answer 6

esto funciona para mí archivo proxy.config.json

{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
}
}

y agregue "ng serve --proxy-config proxy.config.json" en package.json y ejecute el comando npm start

Answer 7

 Please follow below steps
1 In Angular project create a file called **proxy.cons.json** with content like this:
{
"/api/*": {
"target": "http://127.0.0.1:8080",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
2 edit package.json file and add below code
"start": "ng serve --proxy-config proxy.conf.json"
3 call your backend api like this
this.http.get(''/api/v1/people'')
.map(res => res.json());
4 run npm start or ng serve --proxy-config proxy.conf.json