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