servidor angular-cli – como proxy solicitações de API para outro servidor?

Com o servidor de desenvolvimento local de servidor de angular-cli , 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?

    Para o meu conhecimento com a liberação angular 2.0, configurar proxies usando o arquivo .ember-cli não é recomendado. maneira oficial é como abaixo

    1. edite o "start" do seu package.json para ver abaixo

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

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

       { "/api": { "target": "http://api.yourdomai.com", "secure": false } } 
    3. O importante é que você usa npm start invés de ng serve

    Leia mais aqui: Proxy Setup angular 2 cli

    ATUALIZAÇÃO 2017

    A melhor documentação agora está disponível e você pode usar configurações baseadas em json e javascript: proxy de documentação angular-cli

    exemplo de configuração de proxy de https

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

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

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

    proxy.conf.json completo mostrado abaixo:

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

    EDIT: isso não funciona mais em ANGULAR-CLI atual

    Veja a resposta da @imal hasaranga perera para uma solução atualizada


    O servidor em angular-cli vem do projeto ember-cli . Para configurar o servidor, crie um arquivo .ember-cli 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 no 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 quando iniciar o servidor: ng serve --proxy https://api.example.com

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

    Vou explicar tudo o que você precisa saber neste exemplo:

     { "/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 2 (o caminho pode ser armazenado em qualquer lugar) eu quero fazer algo com ele. O caractere * indica que tudo o que segue a subpasta será incluído. Por exemplo, se você tem várias fonts dentro de / folder / sub-folder / , o * irá pegar todas elas

    2. “target” : ” http: // localhost: 1100 ” para o caminho acima, make target url the host / source, portanto, em background nós teremos http: // localhost: 1100 / folder / sub-folder /

    3. “pathRewrite “: {“^ / ​​pasta / sub-pasta /”: “/ new-folder /”}, Agora vamos dizer que você quer testar sua aplicação localmente, o http: // localhost: 1100 / folder / sub- pasta / talvez contenha no caminho inválido: / folder / sub-folder /. Você deseja alterar esse caminho para um caminho correto, que é http: // localhost: 1100 / new-folder / , portanto, o pathRewrite se tornará muito útil. Ele excluirá o caminho no aplicativo (lado esquerdo) e includeá o novo (lado direito)

    4. O atributo “seguro” representa se estamos usando http ou https. Se https for usado no atributo target, defina o atributo seguro como true, caso contrário, defina-o como false

    5. “changeOrigin” : a opção é necessária apenas se o destino do host não for o ambiente atual, por exemplo: localhost. Se você quiser alterar o host para http://www.something.com, que seria o destino no proxy, defina o atributo changeOrigin como “true”:

    6. O atributo “logLevel” especifica se o desenvolvedor deseja gerar o proxy em seu terminal, portanto, ele usaria o valor “debug” como mostrado na imagem

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

    Se funcionar, você deve ver algo assim em seu cmd / terminal

    insira a descrição da imagem aqui

    Podemos encontrar a documentação do proxy para o 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 pacote.json para include a configuração do proxy no ng start. Depois de adicionar “start”: “ng serve –proxy-config proxy.conf.json” aos seus scripts, execute npm start e not ng serve, porque isso irá ignorar a configuração do flag no seu package.json.

    versão atual do angular-cli: 1.1.0

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

    Você pode usar a opção ‘roteador’ e algum código javascript para rewrite a 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 /" 

    Como mostrado acima, o parâmetro –base-href também precisa ser configurado para / se você definir o para um caminho no seu index.html. Essa configuração replaceá isso e é necessário certificar-se de que os URLs nas solicitações http estejam corretamente construídos.

    Então você precisa do seguinte conteúdo ou similar 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 object contendo pares de valores de chave nos quais a chave é o host / caminho solicitado a ser correspondido e o valor é o URL de destino reconfigurado. A outra maneira é quando você atribui uma function 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 para algo para que a opção do roteador funcione. Se você atribuir uma function personalizada à opção de roteador, a opção de destino não será usada para que possa ser definida como true. Caso contrário, ele precisa ser o URL de destino padrão.

    O Webpack usa o http-proxy-middleware para que você encontre documentação útil: 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 function 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 expiração longa usando um plug-in do navegador. Se o cookie não existir, o URL apontará para o site ativo.)

    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 

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

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

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

    Então, 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", ... } }