Esto estuvo cerca de funcionar para mí. También tuvo que añadir

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

Proxy completo.conf.json se muestra a continuación:

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

Voy a explicar todo lo que necesita saber en este ejemplo:

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

1. /carpeta / subcarpeta / * la ruta 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 todo lo que sigue a la subcarpeta será incluido. Por ejemplo, si tiene varias fuentes dentro de /folder / sub-folder / , el * recogerá todas ellas

2. "objetivo": " http://localhost:1100 " para la ruta anterior haga que la url de destino sea el host / fuente, por lo tanto, en segundo plano tendremos http://localhost:1100/folder/sub-folder/

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

4. "el atributo secure" 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, establézcalo en falso

5. "changeOrigin" : opción solo es necesaria si su el destino del 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 y luego establecer el atributo changeOrigin a "true":

6. "El atributo LogLevel" especifica si el desarrollador desea generar el proxy en su terminal, por lo que usaría el valor "debug" como se muestra en la imagen

En general, el proxy le ayuda a desarrollar la aplicación localmente. Usted establece su rutas de los archivos para fines de producción y si tiene todos estos archivos localmente dentro de su proyecto, puede usar 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

EDITAR: ESTO YA NO FUNCIONA EN ANGULAR-CLI

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

El servidor en angular-cli viene del proyecto ember-cli. Para configurar el servidor, cree un archivo .ember-cli en la raíz del proyecto. Añade tu configuración JSON:

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

Reinicie el servidor y se proxy 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 una bandera cuando inicie el servidor: ng serve --proxy https://api.example.com

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

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 tu carpeta raíz, edita tu paquete.json para incluir la configuración del proxy en ng start. Después de agregar "start": "ng serve proxy proxy-config proxy.conf.json " a sus scripts, ejecute npm start y no ng serve, porque eso ignorará la configuración de la bandera en su paquete.json.

Versión actual de angular-cli: 1.1.0

Aquí hay otra forma de proxy cuando se necesita más flexibilidad:

Puede usar la opción 'router' y algún código javascript para reescribir la URL de destino dinámicamente. Para esto, necesita especificar un archivo javascript en lugar de un archivo json como el parámetro proxy 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 base-href también necesita ser establecido en / si de otra manera establece el a una ruta en su índice.HTML. Esta configuración será anule 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 router se puede utilizar de dos maneras. Una es cuando se asigna un objeto que contiene pares de valores de clave donde la clave es el host/ruta solicitado para coincidir y el valor es la URL de destino reescrita. La otra forma es cuando se asigna una función con algún código personalizado, que es lo que Estoy demostrando en mis ejemplos aquí. En este último caso, descubrí que la opción de destino todavía necesita configurarse en algo para que la opción del 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 configurarse en true. De lo contrario, debe ser la URL de destino predeterminada.

Webpack utiliza http-proxy-middleware por lo que encontrará documentación útil alli: 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 se establece para localhost y path '/' y con una larga caducidad utilizando un complemento del navegador. Si la cookie no existe, la URL apuntará al sitio en vivo.)

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"
  }
}

Ejecutar con:

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

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

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

Y una solicitud como http://localhost:4200/api dará lugar a 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.

Así que 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 de host:

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