server angular-cli: come eseguire il proxy delle richieste API su un altro server?

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

Come posso proxy le mie chiamate AJAX su un altro server?

    Per quanto ne so, con angular 2.0 release non è consigliabile impostare i proxy usando il file .ember-cli. il modo ufficiale è come sotto

    1. modifica "start" del tuo package.json per guardare sotto

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

    2. crea un nuovo file chiamato proxy.conf.json nella 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 start invece di ng serve

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

    AGGIORNAMENTO 2017

    Una migliore documentazione è ora disponibile e si possono usare sia le configurazioni basate su json che su javascript: proxy della documentazione di angular-cli

    Esempio di configurazione del proxy https

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

    Questo era vicino a lavorare per me. Inoltre ha dovuto aggiungere

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

    full proxy.conf.json mostrato di seguito:

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

    MODIFICA: QUESTO NON FUNZIONA NELLA CORRENTE ANGOLARE-CLI

    Vedere la risposta da @imal hasaranga perera per una soluzione aggiornata


    Il server in angular-cli proviene dal progetto ember-cli . Per configurare il server, creare un file .ember-cli nella radice del progetto. Aggiungi la tua configurazione JSON qui:

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

    Riavvia il server e eseguirà il proxy di tutte le richieste.

    Ad esempio, sto facendo richieste relative nel mio codice a /v1/foo/123 , che viene raccolto su 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 versione angular-cli: 1.0.0-beta.0

    Spiegherò tutto ciò che devi sapere su questo esempio:

     { "/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 applicazione angular 2 (il percorso può essere memorizzato ovunque) voglio fare qualcosa con esso. Il carattere * indica che tutto ciò che segue la sottocartella sarà incluso. Ad esempio, se hai più font dentro / cartella / sottocartella / , * li raccoglierà tutti

    2. “target” : ” http: // localhost: 1100 ” per il percorso sopra rendere URL di destinazione l’host / source, quindi in background avremo http: // localhost: 1100 / folder / sub-folder /

    3. “pathRewrite “: {“^ / ​​folder / sub-folder /”: “/ new-folder /”}, ora supponiamo che tu voglia testare l’applicazione localmente, http: // localhost: 1100 / folder / sub- cartella / forse contiene un percorso non valido: / cartella / sottocartella /. Si desidera modificare questo percorso in un percorso corretto che è http: // localhost: 1100 / new-folder / , quindi il pathRewrite diventerà molto utile. Escluderà il percorso nell’applicazione (lato sinistro) e includerà quello appena scritto (lato destro)

    4. l’ attributo “sicuro” rappresenta se stiamo usando http o https. Se https viene utilizzato nell’attributo di destinazione, impostare l’attributo di sicurezza 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 si desidera modificare l’host su http://www.something.com che sarebbe il target nel proxy, quindi impostare l’attributo changeOrigin su “true”:

    6. L’ attributo “logLevel” specifica se lo sviluppatore vuole inviare il proxy sul suo terminale, quindi userebbe il valore “debug” come mostrato nell’immagine

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

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

    inserisci la descrizione dell'immagine qui

    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 file package.json per includere la configurazione proxy su ng start. Dopo aver aggiunto “start”: “ng serve –proxy-config proxy.conf.json” agli script, avvia npm start e not ng serve, perché questo ignorerà l’impostazione flag nel pacchetto package.json.

    versione corrente di angular-cli: 1.1.0

    Ecco un altro modo di fare affidamento quando hai bisogno di più flessibilità:

    È ansible utilizzare l’opzione ‘router’ e qualche codice javascript per riscrivere l’URL di destinazione in modo dinamico. Per questo, è necessario specificare un file javascript invece di un file json come parametro –proxy-conf nella lista dei parametri di 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 si imposta su un percorso nel proprio index.html. Questa impostazione la sovrascriverà ed è necessario assicurarsi che gli URL nelle richieste http siano costruiti correttamente.

    Allora hai bisogno del seguente o di contenuti simili 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; 

    Si noti che l’opzione del router può essere utilizzata in due modi. Uno è quando si assegna un object contenente coppie di valori chiave in cui la chiave è l’host / percorso richiesto per la corrispondenza e il valore è l’URL di destinazione riscritto. L’altro modo è quando assegni una funzione con un 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 in modo che 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. Altrimenti, deve essere l’URL di destinazione predefinito.

    Webpack utilizza il middleware http-proxy così troverai qui la documentazione utile: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

    L’esempio seguente 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.)

    Ecco un altro esempio di lavoro (@ 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 

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

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

    e una richiesta come http://localhost:4200/api comporterà una chiamata a http://myhost.com/api/api . Penso che l’intento qui sia di non avere due percorsi diversi tra lo sviluppo e l’ambiente di produzione. Tutto quello che devi fare è usare /api come URL di base.

    Quindi il modo corretto sarebbe semplicemente utilizzare la parte che precede il percorso API, in questo caso solo l’indirizzo host:

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