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

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

ACTUALIZACIÓN 2017

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

ejemplo 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. La forma oficial es como a continuación

1. editar "start"tu package.jsonpara mirar abajo

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

2. cree un nuevo archivo llamado proxy.conf.jsonen la raíz del proyecto y dentro de él defina sus proxies como se muestra a continuación

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

3. Lo importante es que uses en npm startlugar deng serve

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

Explicaré lo que necesita saber en el siguiente ejemplo:

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

1. / carpeta / subcarpeta / * : ruta dice: Cuando veo esta ruta dentro de mi aplicación angular (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 / carpeta / subcarpeta / , el * las recogerá todas

2. "target" : " http: // localhost: 1100 " para la ruta anterior, haga que la URL de destino sea el host / fuente, por lo tanto, en el fondo tendremos http: // localhost: 1100 / folder / subcarpeta /

3. "pathRewrite ": {"^ / ​​carpeta / subcarpeta /": "/ nueva-carpeta /"}, ahora digamos que quieres probar tu aplicación localmente, http: // localhost: 1100 / carpeta / sub- carpeta / tal vez contenga una 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. "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 el destino de su host no es el entorno actual, por ejemplo: localhost. Si desea cambiar el host a www.something.com, que sería el destino en el proxy, establezca el atributo changeOrigin en "true":

6. "logLevel" : el atributo especifica si el desarrollador quiere generar el proxy en su terminal / cmd, por lo tanto, usaría el valor "debug" como se muestra en la imagen

En general, el proxy ayuda a desarrollar la aplicación localmente. Establece las rutas de sus 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 de forma dinámica en su aplicación.

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

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

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

Completo se proxy.conf.jsonmuestra a continuación:

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

EDITAR: ESTO YA NO FUNCIONA EN LA CLI ANGULAR ACTUAL

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

El servidor angular-cliprocede del ember-cliproyecto. Para configurar el servidor, cree un .ember-cliarchivo 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 una bandera cuando inicia el servidor: ng serve --proxy https://api.example.com

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

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

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

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

Como se muestra arriba, el parámetro --base-href también debe configurarse 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 se construyan 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 utilizar de dos formas. Una es cuando asigna un objeto que contiene pares clave-valor donde la clave es el host / ruta solicitados para coincidir y el valor es la URL de destino reescrita. La otra forma es cuando asigna una función con un 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 configurarse en algo para que funcione la opción del enrutador. Si asigna una función personalizada a la opción del enrutador, la opción de destino no se utiliza, por lo que podría establecerse en verdadero. De lo contrario, debe ser la URL de destino predeterminada.

Webpack usa 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 ruta '/' y con una caducidad prolongada mediante un complemento del navegador. Si la cookie no existe, la URL apuntará al sitio activo).

Podemos encontrar la documentación de 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 en ng start. Después de agregar "start": "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

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

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

y una solicitud como http://localhost:4200/apiresultará en una llamada a http://myhost.com/api/api. Creo que la intención aquí es no tener dos caminos diferentes entre el entorno de desarrollo y el de producción. Todo lo que necesitas 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",
    ...
  }
}

Paso 1: vaya a su carpeta raíz Crear proxy.conf.json

{
  "/auth/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Paso 2: Vaya a package.json y busque "scripts" debajo de "start".

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

Paso 3: ahora agregue / auth / en su http

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": '[email protected]', "password": 'Anything@Anything' });
  }

Paso 4: Paso final en Terminal run npm start

En caso de que alguien esté buscando varias entradas de contexto para el mismo objetivo o configuración basada en TypeScript.

proxy.conf.ts

const proxyConfig = [
  {
    context: ['/api/v1', '/api/v2],
    target: 'https://example.com',
    secure: true,
    changeOrigin: true
  },
  {
    context: ['**'], // Rest of other API call
    target: 'http://somethingelse.com',
    secure: false,
    changeOrigin: true
  }
];

module.exports = proxyConfig;

ng serve --proxy-config =. / proxy.conf.ts -o

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

Captura de pantalla del problema de Cors-origin

Se ha enfrentado un problema de Cors en mi solicitud. consulte la captura de pantalla anterior. Después de agregar el problema de configuración de proxy, se ha resuelto. la URL de mi aplicación: localhost: 4200 y solicitando la URL de la API: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Permiso de no-cors del lado de la API permitido. Y tampoco puedo cambiar el problema de cors en el lado del servidor y tuve que cambiar solo en angular (lado del cliente).

Pasos para resolver:

1. cree el archivo proxy.conf.json dentro de la carpeta src.

   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

2. En la solicitud de API

this.http
      .get<GeoCode>('maps/api/geocode/json?sensor=false&address=' + cityName)
      .pipe(
        tap(cityResponse => this.responseCache.set(cityName, cityResponse))
      );

Nota: hemos omitido la URL del nombre de host en la solicitud de la API, se agregará automáticamente al dar la solicitud. cada vez que cambiemos proxy.conf.js tenemos que reiniciar ng-serve, entonces solo se actualizarán los cambios.

3. Configurar proxy en angular.json

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TestProject:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "TestProject:build:production"
            }
          }
        },

Después de terminar estos pasos, reinicie el proxy ng-serve funcionando correctamente como se espera, consulte aquí

> WARNING in
> D:\angular\Divya_Actian_Assignment\src\environments\environment.prod.ts
> is part of the TypeScript compilation but it's unused. Add only entry
> points to the 'files' or 'include' properties in your tsconfig.
> ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled
> successfully. [HPM] GET
> /maps/api/geocode/json?sensor=false&address=chennai ->
> http://www.datasciencetoolkit.org

1. agregar proxy.conf.json

   { "/api": { "target": "http://targetIP:9080", "secure": false, "pathRewrite": {"^/proxy" : ""}, "changeOrigin": true, "logLevel": "debug" } }

   2. en package.json, haz "start": "ng serve --proxy-config proxy.conf.json"

   3. en el código let url = "/ api / clnsIt / dev / 78"; esta URL se traducirá a http: // targetIP: 9080 / api / clnsIt / dev / 78