Metodo Angular2 OPTIONS inviato quando si richiede http.GET

Question

Sto tentando di aggiungere basic authentification alla mia app angular2.

public login() { 
    // Set basic auth headers 
    this.defaultHeaders.set('Authorization', 'Basic ' + btoa(this.username + ':' + this.password)); 

    console.log('username', this.username) 
    console.log('password', this.password) 
    console.log(this.defaultHeaders) 

    // rest is copy paste from monbanquetapiservice 
    const path = this.basePath + '/api/v1/development/order';   

    let req = this.http.get(path, { headers: this.defaultHeaders }); 
    req.subscribe(
     _ => { }, 
     err => this.onError(err) 
    ); 
} 

Quello che mi aspetto di vedere è una richiesta GET con l'intestazione Authorization ho messo.

Ma quello che vedo è innanzitutto un OPZIONI con questo intestazioni:

OPTIONS /api/v1/development/order HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://localhost:3000 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept: */* 
Referer: http://localhost:3000/ 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,fr;q=0.4 

Dato che il mio server non consente OPZIONI su questo URL, ottengo un errore.

So che alcuni metodi come PUT o POST inviano prima un metodo OPTIONS per eseguire il preflight della richiesta, ma GET no.

Perché l'HTTP di angular2 invia prima OPZIONI?

Grazie.

Answer 1

Questo è il modo in cui CORS funziona (quando si utilizzano richieste tra domini diversi). Con CORS, l'applicazione Web remota (qui quella con dominio mydomain.org) sceglie se la richiesta può essere servita grazie a una serie di intestazioni specifiche.

specifica La CORS distingue due casi d'uso distinti:

• 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.

Non è Angular2 che invia la richiesta OPTIONS ma il browser stesso. Non è qualcosa legato a Angular.

Per maggiori dettagli, si potrebbe avere uno sguardo a questo articolo:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Answer 2

Why am I getting an OPTIONS request instead of a GET request?

Questa è una richiesta di verifica preliminare CORS che viene generata dal browser stesso.

Vedi anche
- How to disable OPTIONS request?

Il server deve essere configurato per supportare le richieste di CORS, solo allora la richiesta effettiva GET viene inviato dal browser dopo la richiesta OPTIONS.

Vedi anche
- "No 'Access-Control-Allow-Origin' header is present on the requested resource" - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Access-Control-Allow-Credenziali

indica se la risposta alla richiesta può essere esposto quando la bandiera delle credenziali è vero . Se utilizzato come parte di una risposta a una richiesta di verifica preliminare, indica se la richiesta effettiva può essere effettuata o meno utilizzando le credenziali. Si noti che le richieste GET semplici non sono sottoposte a preflight, pertanto, se viene presentata una richiesta per una risorsa con credenziali, se questa intestazione non viene restituita con la risorsa, la risposta viene ignorata dal browser e non viene restituita al contenuto Web.