Les appels HTTP sont immédiatement annulés

Question

J'ai une extrémité avant angulaire 4 avec un backend CakePHP 3. Lorsque je fais une demande à un point final API en utilisant mon navigateur ou Rest Rest, je reçois une réponse. Mais quand j'envoie la réponse du service angulaire il montre immédiatement annulé dans le réseau. Au début, j'ai supposé que c'était un problème CORS. J'ai essayé à la fois avec et sans CORS activé. J'ai également ajouté $this->Security->csrfCheck = false; à mon AppController.php, ce qui m'a amené à croire que le serveur local n'est jamais touché (aucun point de coupure ne tirait). Donc, à la place, je regarde le côté angulaire de l'équation. J'ai essayé de définir mes en-têtes, mais cela ne fonctionne pas non plus.

import { Headers, Http, Response, RequestOptions } from '@angular/http'; 

login(loginData) { 
    const headers = new Headers({'Content-Type': 'application/json'}); 

    const url:string = this.backendUrl + '/auth/login/?'; 

    return this.Http.post(
     url, 
     JSON.stringify(loginData), 
     { headers: headers } 
    ).map(
     res => res.json 
    ).map(
     response => function(response) { 
      ... 
     }, 
     error => function(error) { 
      ... 
     } 
    ); 
} 

Je suis dans le processus de migration de 1 à 4. Je sais que cela a fonctionné dans Angulaire 1 en utilisant les requêtes HTTP $.

function login(loginData) { 
    var = this.backendUrl + '/auth/login/?'; 

    $http.post(url, loginData).then(...); 
} 

Voici mon composant qui utilise l'abonnement:

login = function(activeUser):ActiveUser|boolean { 
    this.isLoggingIn = true; 

    return this.LoginService.login(activeUser).subscribe(
     activeUser => function(activeUser) { 
      if (activeUser) { 
       this.activeUser = activeUser; 
      } else { 
       this.reset(); 
      } 

      return activeUser; 
     }.bind(this) 
    ).complete(
     function() { 
      this.isLoggingIn = false; 
     }.bind(this) 
    ); 
}; 

Answer 1

Le problème était lié à la façon dont Angular $ http gère désormais les requêtes CORS. Dans la version mise à jour, deux requêtes sont envoyées, une requête OPTIONS et la requête GET/POST. J'ai donc dû changer mon backend pour retourner un 200 sur les OPTIONS sans exécuter la commande et exécuter à la place sur la deuxième requête.

Answer 2

Je ne sais pas pourquoi vous mappez deux fois. Juste à titre de comparaison ... voici à quoi ressemble ma publication (voir ci-dessous). Il enregistre une sauvegarde, mais la syntaxe doit être la même pour un login.

Comment appelez-vous ce service?

Mon code composant ressemble à ceci:

 this.productService.saveProduct(this.product) 
      .subscribe(
       () => this.onSaveComplete(`${this.product.productName} was saved`), 
       (error: any) => this.errorMessage = <any>error 
      ); 

Notez qu'il est SUBSCRIBE qui démarre le Observable et exécute le poste.