Come creare una richiesta per più domini (Angular 2)?

Question

Come creare una richiesta tra domini utilizzando Angular 2? Potete fornire un esempio? Richiesta tra localhost: 3000 e localhost: 8000 tra domini diversi? Grazie.

Answer 1

In realtà, in Angular2 non c'è nulla da fare per quanto riguarda le richieste cross domain. CORS è qualcosa supportato nativamente dai browser. Questo link vi potrebbe aiutare a capire come funziona:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

Per essere breve, nel caso di richiesta di dominio croce, il browser aggiunge automaticamente un'intestazione Origin nella richiesta . Ci sono due casi:

• semplici richieste. Questo caso d'uso si applica se utilizziamo i metodi HTTP GET, HEAD e POST. Nel caso dei metodi POST, sono supportati solo i tipi di contenuto con i seguenti valori: text/plain, application/x-www-form-urlencoded e multipart/form-data.
• Richieste preflight. Quando il caso d'uso "richieste semplici" non si applica, viene effettuata una prima richiesta (con il metodo HTTP OPTIONS) per verificare cosa può essere fatto nel contesto di richieste interdominio.

Quindi la maggior parte del lavoro deve essere eseguita sul lato server per restituire le intestazioni CORS. Quello principale è quello Access-Control-Allow-Origin.

200 OK HTTP/1.1 
(...) 
Access-Control-Allow-Origin: * 

Per eseguire il debug di questi problemi, è possibile utilizzare gli strumenti per sviluppatori all'interno dei browser (scheda Rete).

Per quanto riguarda Angular2, è sufficiente utilizzare l'oggetto Http come qualsiasi altra richiesta (stesso dominio per esempio):

return this.http.get('https://angular2.apispark.net/v1/companies/') 
      .map(res => res.json()).subscribe(
    ... 
); 

Answer 2

Per me è stato un altro problema. Questo potrebbe essere banale per alcuni, ma mi ci è voluto un po 'per capire. Quindi questa risposta potrebbe essere utile per alcuni.

Ho avuto il mio API_BASE_URL impostato su localhost:58577. La moneta è caduta dopo aver letto il messaggio di errore per la milionesima volta. Il problema è nella parte in cui si dice che supporta solo HTTP e alcuni altri protocolli. Ho dovuto cambiare il API_BASE_URL in modo che includesse il protocollo. Quindi, cambiare API_BASE_URL a http://localhost:58577 ha funzionato perfettamente.

Answer 3

Non c'è niente che puoi fare dal lato del cliente. Ho aggiunto @CrossOrigin nel controller sul lato server e funziona.

@RestController 
@CrossOrigin(origins = "*") 
public class MyController 

Fare riferimento a docs.

Lin

Answer 4

@RestController 
@RequestMapping(value = "/profile") 
@CrossOrigin(origins="*") 
public class UserProfileController { 

SpringREST fornisce @CrossOrigin annotazioni dove (origini = "*") consentono l'accesso alle API REST da qualsiasi fonte.

Possiamo aggiungerlo alle rispettive API o all'intero RestController.

Answer 5

Molte risposte lunghe (e corrette) qui. Ma di solito non farai queste cose manualmente - almeno non quando imposti i tuoi primi progetti per lo sviluppo (questo è il punto in cui di solito ti imbatti in queste cose). Se usi koa per il backend: usa koa-cors. Installare via npm ...

npm install --save koa-cors 

... e utilizzarlo nel codice:

const cors = require('koa-cors'); 
const Koa = require('koa'); 
const app = new Koa(); 
app.use(cors()); 

problema risolto.

Answer 6

Nella mia esperienza i plug-in hanno funzionato con http ma non con l'ultimo httpClient. Inoltre, la configurazione delle intestazioni di respsonse di CORS sul server non era realmente un'opzione. Quindi, ho creato un file proxy.conf.json per fungere da server proxy.

Ulteriori informazioni su questo qui: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

sotto è il mio file prox.conf.json

{ 
    "/posts": { 
    "target": "https://example.com", 
    "secure": true, 
    "pathRewrite": { 
    "^/posts": "" 
    }, 
    "changeOrigin": true 
    } 
} 

ho messo il file proxy.conf.json proprio accanto alla la package.json file nella stessa directory

quindi ho modificato il comando di avvio nel file package.json come sotto

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

ora, la chiamata http dalla mia componente applicazione è il seguente

return this._http.get('/posts/pictures?method=GetPictures') 
.subscribe((returnedStuff) => { 
    console.log(returnedStuff); 
}); 

Infine per eseguire la mia applicazione, avrei dovuto usare NPM iniziano o ng servire --proxy -config proxy.conf.json