Come specificare "Access-Control-Allow-Origin" durante l'esecuzione di servizi angular-cli

Question

Sono in esecuzione un server API Spring e un server Angular-cli per servire il mio contenuto statico. Nella produzione useremo un CDN, ma per lo sviluppo entrambi i server front e backend sono in esecuzione sul mio box locale su porte differenti. Il server Spring serve la pagina html iniziale e quindi il resto del JS, CSS e html provengono da angular-cli/CDN.

Il problema è che quando viene effettuata la chiamata a System.import(), il browser si lamenta di CORS: XMLHttpRequest non può caricare http://localhost:4200/system-config.js. Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine 'http://localhost:8080' non è quindi consentita l'accesso. zone.js: 323 errore: Errore: errore di caricamento XHR http://localhost:4200/system-config.js (...)

Come faccio a configurare angolare-cli per impostare il '-Control-Allow-Access origine' intestazione modo che il browser non vomitare.

Answer 1

Ho effettivamente risolto questo problema utilizzando il componente aggiuntivo ember-cli-cors. Tutto ciò che devi fare è installarlo usando il comando ng in questo modo: ng install ember-cli-cors

Answer 2

La configurazione per supportare CORS viene eseguita all'interno del server, è necessario aggiornare l'API Spring per consentire le richieste dall'app CLI che è ospitata sulla porta 4200 per impostazione predefinita.

Answer 3

È possibile aggiungere una configurazione-. 'Proxy' la richiesta al dominio del tuo server.

Answer 4

FWIW,

CORS è stata abilitata in CLI angolare ora. L'intestazione Access-Control-Allow-Origin predefinita è impostata su *. Non sono sicuro esattamente quando è stato rilasciato, ma di sicuro 1.0.0 e dopo averlo abilitato.

Come per tutti i problemi CORS, anche il server API deve essere configurato per accettare CORS.

Answer 5

In una configurazione molto simile è risultato che i browser basati su Chrome non supportano CORS per gli indirizzi localhost. Vedi https://stackoverflow.com/a/10892392/661414

Answer 6

Ho appena trascorso circa 20 ore cercando di risolvere questo problema e leggere numerosi post. La risposta rapida è, modificare il server CORS gestione ed evitare glassfish. Il seguente codice funziona su tom ee (possibilmente altri), ma non su glassfish.

@Provider 
public class NewCrossOriginResourceSharingFilter implements ContainerResponseFilter { 

@Override 
public void filter(ContainerRequestContext requestContext, ContainerResponseContext response) { 
    response.getHeaders().putSingle("Access-Control-Allow-Origin", "*"); 
    response.getHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); 
    response.getHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type"); 
} 
} 

bisecando il codice riga per riga ho trovato che l'aggiunta del "Access-Control-Allow-Header" chiamata causa un'eccezione in GlassFish determinando un Internal Server Error (500). Apparentemente l'eccezione è stata lì per oltre un anno e non mostra alcun segno di riparazione.

Non sono mai riuscito a far funzionare la soluzione proxy-config. Vorrei vedere i messaggi di debug per l'effetto di

/api/path/users => http:localhost:8080/ 

Sembra che ogni params percorso finale o query vengono troncati dal filtro proxy.

Spero che questo risparmi un po 'di tempo.