Com o angular-cli ng serveservidor de desenvolvimento local, ele está servindo todos os arquivos estáticos do diretório do meu projeto.

Como posso fazer proxy de minhas chamadas AJAX para um servidor diferente?

ATUALIZAÇÃO 2017

Melhor documentação agora está disponível e você pode usar configurações baseadas em JSON e JavaScript: proxy de documentação angular-cli

amostra de configuração de proxy https

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

Pelo que sei, com o lançamento do Angular 2.0, não é recomendável configurar proxies usando o arquivo .ember-cli. forma oficial é como abaixo

1. edite o "start"seu package.jsonpara olhar abaixo

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

2. crie um novo arquivo chamado proxy.conf.jsonna raiz do projeto e dentro dele defina seus proxies como abaixo

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

3. O importante é que você use em npm startvez deng serve

Leia mais aqui: Configuração de proxy Angular 2 cli

Explicarei o que você precisa saber no exemplo abaixo:

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

1. / folder / sub-folder / * : path diz: Quando vejo este caminho dentro do meu aplicativo angular (o caminho pode ser armazenado em qualquer lugar), quero fazer algo com ele. O caractere * indica que tudo o que segue a subpasta será incluído. Por exemplo, se você tiver várias fontes dentro de / pasta / subpasta / , o * irá pegar todas elas

2. "target" : " http: // localhost: 1100 " para o caminho acima torna o URL de destino o host / fonte, portanto, em segundo plano, teremos http: // localhost: 1100 / folder / sub-folder /

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"}, Agora digamos que você deseja testar seu aplicativo localmente, o http: // localhost: 1100 / folder / sub- pasta / talvez contenha um caminho inválido: / pasta / subpasta /. Você deseja alterar esse caminho para um caminho correto que seja http: // localhost: 1100 / new-folder / , portanto, o pathRewrite se tornará muito útil. Isso excluirá o caminho no aplicativo (lado esquerdo) e incluirá o caminho recém-escrito (lado direito)

4. "seguro" : representa se estamos usando http ou https. Se https for usado no atributo de destino, defina o atributo seguro como verdadeiro, caso contrário, defina-o como falso

5. "changeOrigin" : a opção só é necessária se o destino do seu host não for o ambiente atual, por exemplo: localhost. Se você deseja alterar o host para www.something.com, que seria o destino no proxy, defina o atributo changeOrigin como "true":

6. "logLevel" : o atributo especifica se o desenvolvedor deseja enviar o proxy em seu terminal / cmd, portanto, ele usaria o valor "debug" conforme mostrado na imagem

Em geral, o proxy ajuda a desenvolver o aplicativo localmente. Você define seus caminhos de arquivo para fins de produção e se você tiver todos esses arquivos localmente dentro de seu projeto, você pode apenas usar o proxy para acessá-los sem alterar o caminho dinamicamente em seu aplicativo.

Se funcionar, você deverá ver algo assim em seu cmd / terminal.

Isso estava perto de funcionar para mim. Também tive que adicionar:

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

Completo proxy.conf.jsonmostrado abaixo:

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

EDITAR: ISSO NÃO FUNCIONA MAIS NO CURRENT ANGULAR-CLI

Veja a resposta de @imal hasaranga perera para soluções atualizadas

O servidor angular-clivem do ember-cliprojeto. Para configurar o servidor, crie um .ember-cliarquivo na raiz do projeto. Adicione sua configuração JSON lá:

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

Reinicie o servidor e ele fará o proxy de todas as solicitações.

Por exemplo, estou fazendo solicitações relativas em meu código para /v1/foo/123, que está sendo selecionado em https://api.example.com/v1/foo/123.

Você também pode usar um sinalizador ao iniciar o servidor: ng serve --proxy https://api.example.com

Atual para a versão angular-cli: 1.0.0-beta.0

Aqui está outra forma de proxy quando você precisa de mais flexibilidade:

Você pode usar a opção 'roteador' e algum código javascript para reescrever o URL de destino dinamicamente. Para isso, você precisa especificar um arquivo javascript em vez de um arquivo json como o parâmetro --proxy-conf em sua lista de parâmetros de script 'start':

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

Conforme mostrado acima, o parâmetro --base-href também precisa ser definido como / se você definir <base href = "..."> como um caminho em seu index.html. Essa configuração substituirá isso e é necessário garantir que os URLs nas solicitações http sejam construídos corretamente.

Então você precisa do seguinte conteúdo ou de conteúdo semelhante em seu proxy.conf.js (não 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;

Observe que a opção do roteador pode ser usada de duas maneiras. Uma é quando você atribui um objeto que contém pares de valores-chave em que a chave é o host / caminho solicitado para correspondência e o valor é o URL de destino reescrito. A outra maneira é quando você atribui uma função com algum código personalizado, que é o que estou demonstrando em meus exemplos aqui. No último caso, descobri que a opção de destino ainda precisa ser definida como algo para que a opção de roteador funcione. Se você atribuir uma função personalizada à opção do roteador, a opção de destino não será usada, portanto, pode ser apenas definida como verdadeira. Caso contrário, deve ser o URL de destino padrão.

Webpack usa http-proxy-middleware, então você encontrará documentação útil lá: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

O exemplo a seguir obterá o nome do desenvolvedor de um cookie para determinar o URL de destino usando uma função personalizada como roteador:

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;

(O cookie é definido para localhost e caminho '/' e com uma longa validade usando um plug-in do navegador. Se o cookie não existir, o URL apontará para o site ativo.

Podemos encontrar a documentação do proxy para Angular-CLI aqui:

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

Depois de configurar um arquivo chamado proxy.conf.json em sua pasta raiz, edite seu package.json para incluir a configuração de proxy no início do ng. Depois de adicionar "start": "ng serve --proxy-config proxy.conf.json" aos seus scripts, execute npm start e não ng serve, porque isso irá ignorar a configuração do sinalizador em seu package.json.

versão atual do angular-cli: 1.1.0

É importante observar que o caminho do proxy será anexado a tudo o que você configurou como seu destino. Portanto, uma configuração como esta:

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

e uma solicitação like http://localhost:4200/apiresultará em uma chamada para http://myhost.com/api/api. Acho que a intenção aqui é não ter dois caminhos diferentes entre o ambiente de desenvolvimento e produção. Tudo o que você precisa fazer é usar /apicomo URL base.

Portanto, a maneira correta seria simplesmente usar a parte que vem antes do caminho da API, neste caso apenas o endereço do host:

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

Etapa 1: Vá para a pasta raiz Criar proxy.conf.json

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

Etapa 2: vá para package.json, encontre "scripts" em "start"

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

Etapa 3: agora adicione / auth / em seu http

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

Etapa 4: Etapa final na execução do Terminal npm start

No caso de alguém estar procurando por várias entradas de contexto para o mesmo destino ou configuração baseada em 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

Aqui está outro exemplo de trabalho (@ 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"
  }
}

correr com :

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

Captura de tela do problema da origem do Cors

Problema de Cors foi enfrentado em meu aplicativo. consulte a imagem acima. Depois de adicionar a configuração do proxy, o problema foi resolvido. my application url: localhost: 4200 and requesting api url: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Permissão sem cors do lado da API permitida. E também não estou conseguindo mudar o cors-issue no lado do servidor e tive que mudar apenas no angular (lado do cliente).

Passos para resolver:

1. crie o arquivo proxy.conf.json dentro da pasta src.

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

2. No pedido de Api

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

Observação: pulamos o URL do nome do host na solicitação de API, ele será adicionado automaticamente ao fornecer a solicitação. sempre que mudar o proxy.conf.js, temos que reiniciar o ng-serve, então apenas as mudanças serão atualizadas.

3. Proxy de configuração em 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"
            }
          }
        },

Após terminar esta etapa reinicie o ng-serve Proxy funcionando corretamente como esperado, consulte aqui

> 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. adicionar proxy.conf.json

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

   2. em package.json, faça "start": "ng serve --proxy-config proxy.conf.json"

   3. no código deixe url = "/ api / clnsIt / dev / 78"; este url será traduzido para http: // targetIP: 9080 / api / clnsIt / dev / 78