Con il angular-cli ng serveserver di sviluppo locale, serve tutti i file statici dalla directory del mio progetto.

Come posso proxy le mie chiamate AJAX a un server diverso?

AGGIORNAMENTO 2017

È ora disponibile una documentazione migliore ed è possibile utilizzare configurazioni basate su JSON e JavaScript: proxy della documentazione angular-cli

configurazione del proxy https di esempio

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

Per quanto ne so con la versione Angular 2.0, la configurazione dei proxy utilizzando il file .ember-cli non è consigliata. modo ufficiale è come sotto

1. modifica "start"del tuo package.jsonper guardare sotto

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

2. crea un nuovo file chiamato proxy.conf.jsonnella radice del progetto e al suo interno definisci i tuoi proxy come sotto

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

3. La cosa importante è che usi npm startinvece ding serve

Leggi di più da qui: Proxy Setup Angular 2 cli

Ti spiego cosa devi sapere nell'esempio qui sotto:

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

1. / cartella / sottocartella / *: percorso dice: Quando vedo questo percorso all'interno della mia app angolare (il percorso può essere memorizzato ovunque) voglio farci qualcosa. Il carattere * indica che verrà incluso tutto ciò che segue la sottocartella. Ad esempio, se hai più caratteri all'interno di / cartella / sottocartella / , * li raccoglierà tutti

2. "target" : "http: // localhost: 1100" per il percorso sopra rende l' URL di destinazione host / sorgente, quindi in background avremo http: // localhost: 1100 / cartella / sottocartella /

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"}, ora diciamo che vuoi testare la tua app localmente, l'url http: // localhost: 1100 / folder / sub -folder / può contenere un percorso non valido: / folder / sub-folder /. Vuoi cambiare quel percorso in uno corretto che è http: // localhost: 1100 / new-folder /, quindi pathRewrite diventerà utile. Escluderà il percorso nell'app (lato sinistro) e includerà quello appena scritto (lato destro)

4. "secure" : rappresenta se stiamo utilizzando http o https. Se https viene utilizzato nell'attributo di destinazione, impostare l'attributo sicuro su true altrimenti impostarlo su false

5. "changeOrigin" : l'opzione è necessaria solo se la destinazione dell'host non è l'ambiente corrente, ad esempio: localhost. Se desideri cambiare l'host in www.something.com, che sarebbe l'obiettivo nel proxy, imposta l'attributo changeOrigin su "true":

6. "logLevel" : l'attributo specifica se lo sviluppatore vuole visualizzare il proxy sul suo terminale / cmd, quindi userebbe il valore "debug" come mostrato nell'immagine

In generale, il proxy aiuta a sviluppare l'applicazione in locale. Puoi impostare i percorsi dei file per scopi di produzione e se hai tutti questi file localmente all'interno del tuo progetto puoi semplicemente utilizzare il proxy per accedervi senza modificare dinamicamente il percorso nella tua app.

Se funziona, dovresti vedere qualcosa di simile nel tuo cmd / terminal.

Questo è stato vicino a lavorare per me. Inoltre ha dovuto aggiungere:

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

Completo proxy.conf.jsonmostrato di seguito:

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

EDIT: QUESTO NON FUNZIONA PIÙ NELL'ATTUALE CLI ANGOLARE

Vedi la risposta di @imal hasaranga perera per una soluzione aggiornata

Il server in angular-cliproviene dal ember-cliprogetto. Per configurare il server, creare un .ember-clifile nella radice del progetto. Aggiungi la tua configurazione JSON lì:

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

Riavvia il server e proverà tutte le richieste.

Ad esempio, sto facendo richieste relative nel mio codice a /v1/foo/123, che viene ritirato in https://api.example.com/v1/foo/123.

Puoi anche usare un flag quando avvii il server: ng serve --proxy https://api.example.com

Corrente per la versione angular-cli: 1.0.0-beta.0

Ecco un altro modo per eseguire il proxy quando hai bisogno di maggiore flessibilità:

Puoi utilizzare l'opzione "router" e del codice javascript per riscrivere dinamicamente l'URL di destinazione. Per questo, è necessario specificare un file javascript invece di un file json come parametro --proxy-conf nell'elenco dei parametri dello script "start":

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

Come mostrato sopra, anche il parametro --base-href deve essere impostato su / se altrimenti imposti <base href = "..."> su un percorso nel tuo index.html. Questa impostazione sovrascriverà quella ed è necessario assicurarsi che gli URL nelle richieste http siano costruiti correttamente.

Quindi hai bisogno del seguente contenuto o simile nel tuo proxy.conf.js (non 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;

Notare che l'opzione router può essere utilizzata in due modi. Uno è quando si assegna un oggetto contenente coppie di valori chiave in cui la chiave è l'host / percorso richiesto da abbinare e il valore è l'URL di destinazione riscritto. L'altro modo è quando assegni una funzione con del codice personalizzato, che è quello che sto dimostrando nei miei esempi qui. In quest'ultimo caso ho scoperto che l'opzione di destinazione deve ancora essere impostata su qualcosa affinché l'opzione del router funzioni. Se si assegna una funzione personalizzata all'opzione router, l'opzione target non viene utilizzata, quindi potrebbe essere impostata su true. In caso contrario, deve essere l'URL di destinazione predefinito.

Webpack utilizza http-proxy-middleware, quindi troverai documentazione utile qui: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

Il seguente esempio otterrà il nome dello sviluppatore da un cookie per determinare l'URL di destinazione utilizzando una funzione personalizzata come router:

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;

(Il cookie è impostato per localhost e percorso "/" e con una lunga scadenza utilizzando un plug-in del browser. Se il cookie non esiste, l'URL punterà al sito live.)

Possiamo trovare la documentazione del proxy per Angular-CLI qui:

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

Dopo aver impostato un file chiamato proxy.conf.json nella cartella principale, modifica il tuo package.json per includere la configurazione del proxy all'avvio di ng. Dopo aver aggiunto "start": "ng serve --proxy-config proxy.conf.json" ai tuoi script, esegui npm start e non ng serve, perché questo ignorerà l'impostazione dei flag nel tuo package.json.

versione attuale di angular-cli: 1.1.0

È importante notare che il percorso del proxy verrà aggiunto a qualsiasi cosa tu abbia configurato come destinazione. Quindi una configurazione come questa:

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

e una richiesta simile http://localhost:4200/apisi tradurrà in una chiamata a http://myhost.com/api/api. Penso che l'intento qui sia quello di non avere due percorsi diversi tra l'ambiente di sviluppo e l'ambiente di produzione. Tutto quello che devi fare è utilizzare /apicome URL di base.

Quindi il modo corretto sarebbe usare semplicemente la parte che precede il percorso api, in questo caso solo l'indirizzo host:

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

Nel caso in cui qualcuno stia cercando più voci di contesto per la stessa destinazione o configurazione basata su 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

Passaggio 1: vai alla cartella principale Crea proxy.conf.json

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

Passaggio 2: vai a package.json trova "scripts" sotto che trova "start"

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

Passaggio 3: ora aggiungi / auth / nel tuo http

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": 'xyz@gmail.com', "password": 'Anything@Anything' });
  }

Passaggio 4: Passaggio finale nel terminale eseguire npm start

Ecco un altro esempio funzionante (@ 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"
  }
}

Corri con :

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

Screenshot del problema di Cors-origin

Il problema di Cors è stato affrontato nella mia applicazione. fare riferimento alla schermata sopra. Dopo aver aggiunto la configurazione del proxy, il problema è stato risolto. URL della mia applicazione: localhost: 4200 e URL richiesta dell'API: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Permesso no-cors lato API consentito. Inoltre non sono in grado di modificare cors-issue sul lato server e ho dovuto cambiare solo in angular (lato client).

Passaggi per risolvere:

1. crea il file proxy.conf.json nella cartella src.

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

2. Nella richiesta API

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

Nota: abbiamo saltato l'URL del nome host nella richiesta API, verrà aggiunto automaticamente durante la richiesta. ogni volta che si cambia proxy.conf.js dobbiamo riavviare ng-serve, quindi verranno aggiornate solo le modifiche.

3. Config proxy in 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"
            }
          }
        },

Dopo aver terminato questi passaggi, riavviare ng-serve Proxy funzionando correttamente come previsto fare riferimento qui

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

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

2. in package.json, make "start": "ng serve --proxy-config proxy.conf.json"

3. nel codice lascia url = "/ api / clnsIt / dev / 78"; questo URL verrà tradotto in http: // targetIP: 9080 / api / clnsIt / dev / 78