change - page title angular 4

servidor angular-cli: ¿cómo proxy las solicitudes de API a otro servidor?

Question

Con el servidor de desarrollo local angular-cli ng serve , sirve todos los archivos estáticos del directorio de mi proyecto.

¿Cómo puedo enviar mis llamadas AJAX a un servidor diferente?

Answer 1

ACTUALIZACIÓN 2017

Ahora hay una mejor documentación disponible y puede usar configuraciones basadas en JSON y JavaScript: proxy de documentación angular-cli

muestra de configuración de proxy https

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

Que yo sepa con la versión Angular 2.0, no se recomienda configurar proxies usando el archivo .ember-cli. forma oficial es como a continuación

1. edite "start" de su package.json para mirar a continuación

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

2. cree un nuevo archivo llamado proxy.conf.json en la raíz del proyecto y dentro de ese defina sus proxies como a continuación

   {
     "/api": {
       "target": "http://api.yourdomai.com",
       "secure": false
     }
   }

3. Lo importante es que use npm start lugar de ng serve

Lea más desde aquí: Proxy Setup Angular 2 cli

Answer 2

Aquí hay otra forma de representación cuando necesita más flexibilidad:

Puede usar la opción ''enrutador'' y algún código javascript para reescribir la URL de destino de forma dinámica. Para esto, debe especificar un archivo javascript en lugar de un archivo json como el parámetro --proxy-conf en su lista de parámetros de script ''start'':

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

Como se muestra arriba, el parámetro --base-href también debe establecerse en / si de lo contrario establece <base href = "..."> en una ruta en su index.html. Esta configuración anulará eso y es necesario asegurarse de que las URL en las solicitudes http estén construidas correctamente.

Entonces necesita el siguiente contenido o similar en su proxy.conf.js (¡no json!):

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = ''https://www.myrewrittenurl.com''; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

Tenga en cuenta que la opción de enrutador se puede usar de dos maneras. Una es cuando asigna un objeto que contiene pares de valores clave donde la clave es el host / ruta solicitada para que coincida y el valor es la URL de destino reescrita. La otra forma es cuando asigna una función con algún código personalizado, que es lo que estoy demostrando en mis ejemplos aquí. En el último caso, descubrí que la opción de destino aún debe establecerse en algo para que la opción de enrutador funcione. Si asigna una función personalizada a la opción de enrutador, entonces la opción de destino no se usa, por lo que podría establecerse en verdadero. De lo contrario, debe ser la URL de destino predeterminada.

Webpack utiliza http-proxy-middleware, por lo que encontrará documentación útil allí: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

El siguiente ejemplo obtendrá el nombre del desarrollador de una cookie para determinar la URL de destino utilizando una función personalizada como enrutador:

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '''';
            var rc = req.headers.cookie;
            rc && rc.split('';'').forEach(function( cookie ) {
                var parts = cookie.split(''='');
                if(parts.shift().trim() == ''dev'') {
                    devName = decodeURI(parts.join(''=''));
                }
            });
            var target = ''https://www.''+ (devName ? devName + ''.'' : '''' ) +''mycompany.com''; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

(La cookie está configurada para localhost y la ruta ''/'' y con un vencimiento prolongado utilizando un complemento de navegador. Si la cookie no existe, la URL apuntará al sitio activo).

Answer 3

Aquí hay otro ejemplo de trabajo (@ angular / cli 1.0.4):

proxy.conf.json:

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

corre con :

ng serve --proxy-config proxy.conf.json

Answer 4

Es importante tener en cuenta que la ruta del proxy se agregará a lo que haya configurado como destino. Entonces, una configuración como esta:

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

y una solicitud como http://localhost:4200/api dará como resultado una llamada a http://myhost.com/api/api . Creo que la intención aquí es no tener dos caminos diferentes entre el desarrollo y el entorno de producción. Todo lo que necesita hacer es usar /api como su URL base.

Entonces, la forma correcta sería simplemente usar la parte que viene antes de la ruta de la API, en este caso solo la dirección del host:

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}

Answer 5

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

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

El proxy.conf.json completo se muestra a continuación:

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

Answer 6

Explicaré todo lo que necesita saber sobre este ejemplo:

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

1. / folder / sub-folder / * path dice: Cuando veo esta ruta dentro de mi aplicación angular 2 (la ruta se puede almacenar en cualquier lugar) quiero hacer algo con ella. El carácter * indica que se incluirá todo lo que sigue a la subcarpeta. Por ejemplo, si tiene varias fuentes dentro de / folder / sub-folder / , el * las recogerá todas

2. "target" : " http: // localhost: 1100 " para la ruta anterior, la URL de destino es el host / fuente, por lo tanto, en el fondo tendremos http://localhost:1100/folder/sub-folder/

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"}, ahora digamos que desea probar su aplicación localmente, http://localhost:1100/folder/sub-folder/ quizás contiene en ruta no válida: / carpeta / subcarpeta /. Desea cambiar esta ruta a una ruta correcta que sea http://localhost:1100/new-folder/ , por lo tanto, pathRewrite será muy útil. Excluirá la ruta en la aplicación (lado izquierdo) e incluirá la recién escrita (lado derecho)

4. El atributo "seguro" representa si estamos usando http o https. Si se usa https en el atributo de destino, establezca el atributo seguro en verdadero; de lo contrario, configúrelo en falso

5. "changeOrigin" : la opción solo es necesaria si su objetivo de host no es el entorno actual, por ejemplo: localhost. Si desea cambiar el host a www.something.com, que sería el objetivo en el proxy, configure el atributo changeOrigin en "true":

6. El atributo "logLevel" especifica si el desarrollador desea generar el proxy en su terminal, por lo tanto, usaría el valor de "depuración" como se muestra en la imagen

En general, el proxy ayuda a desarrollar la aplicación localmente. Configura las rutas de los archivos para fines de producción y si tiene todos estos archivos localmente dentro de su proyecto, puede usar el proxy para acceder a ellos sin cambiar la ruta dinámicamente en su aplicación.

Si funciona, debería ver algo como esto en su cmd / terminal

Answer 7

Podemos encontrar la documentación del proxy para Angular-CLI aquí:

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Después de configurar un archivo llamado proxy.conf.json en su carpeta raíz, edite su package.json para incluir la configuración del proxy al iniciar ng. Después de agregar "inicio": "ng serve --proxy-config proxy.conf.json" a sus scripts, ejecute npm start y no ng serve, porque eso ignorará la configuración del indicador en su package.json.

versión actual de angular-cli: 1.1.0

Answer 8

EDITAR: ESTO YA NO FUNCIONA EN LA CLI ANGULAR ACTUAL

Vea la respuesta de @imal hasaranga perera para obtener una solución actualizada

El servidor en angular-cli proviene del proyecto ember-cli . Para configurar el servidor, cree un archivo .ember-cli en la raíz del proyecto. Agregue su configuración JSON allí:

{
   "proxy": "https://api.example.com"
}

Reinicie el servidor y enviará todas las solicitudes allí.

Por ejemplo, estoy haciendo solicitudes relativas en mi código a /v1/foo/123 , que se está recogiendo en https://api.example.com/v1/foo/123 .

También puede usar un indicador cuando inicie el servidor: ng serve --proxy https://api.example.com

Actual para la versión angular-cli: 1.0.0-beta.0