web-dev-qa-db-fra.com

Méthode Angular2 OPTIONS envoyée lors de la demande de http.GET

J'essaie d'ajouter authentification de base à mon application 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)
    );
}

Ce que je compte voir, c'est une requête GET avec l'en-tête Authorization que je mets.

Mais ce que je vois est d’abord un OPTIONS avec cet en-tête:

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

Puisque mon serveur n'autorise pas OPTIONS sur cette URL, j'obtiens une erreur.

Je sais que certaines méthodes telles que PUT ou POST envoient d'abord une méthode OPTIONS pour contrôler en amont la demande, mais GET ne le fait pas.

Pourquoi http de angular2 envoie-t-il d’abord une option?

Merci.

httpcorsangular
42
amaurymartiny

C’est ainsi que fonctionne CORS (lors de l’utilisation de requêtes interdomaines). Avec CORS, l’application Web distante (ici, celle du domaine mydomain.org) détermine si la demande peut être traitée grâce à un ensemble d’en-têtes spécifiques.

La spécification CORS distingue deux cas d'utilisation distincts:

  • Requêtes simples . Ce cas d'utilisation s'applique si nous utilisons les méthodes HTTP GET, HEAD et POST. Dans le cas des méthodes POST, seuls les types de contenu avec les valeurs suivantes sont pris en charge: text/plain, application/x-www-form-urlencoded et multipart/form-data.
  • Requêtes avec contrôle en amont . Lorsque le cas d’utilisation "Requêtes simples" ne s’applique pas, une première requête (avec la méthode HTTP OPTIONS) est effectuée pour vérifier ce qui peut être fait dans le contexte de requêtes interdomaines.

Ce n'est pas Angular2 qui envoie la requête OPTIONS mais le navigateur lui-même. Ce n'est pas quelque chose lié à Angular.

Pour plus de détails, vous pouvez consulter cet article:

74
Thierry Templier

Pourquoi ai-je une requête OPTIONS au lieu d'une requête GET?

Il s’agit d’une demande de contrôle en amont CORS générée par le navigateur lui-même.

Voir également
- Comment désactiver la demande OPTIONS?

Le serveur doit être configuré pour prendre en charge les demandes CORS. La demande GET n'est alors envoyée par le navigateur qu'après la demande OPTIONS.

Voir également
- "aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée" - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Access-Control-Allow-Credentials

Indique si la réponse à la demande peut ou non être exposée lorsque l'indicateur d'informations d'identification est true. Utilisé dans le cadre d'une réponse à une demande de contrôle en amont, il indique si la demande réelle peut ou non être effectuée à l'aide d'informations d'identification. Notez que les demandes GET simples ne font pas l'objet d'un contrôle en amont. Ainsi, si une demande est faite pour une ressource avec des informations d'identification, si cet en-tête n'est pas renvoyé avec la ressource, la réponse est ignorée par le navigateur et n'est pas renvoyée au contenu Web.

6
Günter Zöchbauer