web-dev-qa-db-fra.com

Angular 2 - Le code de statut HTTP 401 de la réponse au contrôle en amont est incorrect.



Je sais qu'il y a déjà beaucoup de problèmes résolus ici,
mais malheureusement aucun d'entre eux ne m'a aidé :-(.

Voici mon problème: 
J'essaie de me connecter de mon hôte local à mon service REST sur un serveur. Cela fonctionne bien avec un plugin FF REST, mais mon application génère les erreurs suivantes:

Comment j'essaie d'obtenir les données que je veux:

@Injectable()
export class ModelsComponent implements OnInit {

    private restRoot = 'http://.../my_REST_Service';
    private data;

    constructor(private http: Http) { }

    ngOnInit() {
        this.getModels().subscribe(res => {
            this.data = res; 
            console.log(this.data);
        });
    }

    authHeaders() {
        let username: string = 'xxxx';
        let password: string = 'xxxx';

        let token: string = btoa(username + ":" + password);

        let headers: Headers = new Headers();
        headers.append('Access-Control-Expose-Headers', 'Authorization');
        headers.append('Authorization', 'Basic ' + token);
        headers.append("Access-Control-Allow-Origin", "http://localhost:4200/");
        headers.append("Access-Control-Allow-Methods", "*");
        headers.append("Access-Control-Allow-Headers", "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With");
        headers.append("Access-Control-Allow-Credentials", "true");

        return headers;
    }

    getModels(): Observable<any> {
        return this.http.get(this.restRoot, {
                    headers: this.authHeaders(), 
                    withCredentials: true        <- from a similar issue
               }).map(res => res.json());
    }
}

Mon serveur est configuré comme ceci:

Header set Access-Control-Allow-Origin "http://localhost:4200"
Header set Access-Control-Allow-Headers "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With"
Header set Access-Control-Allow-Methods "*"
Header set Access-Control-Allow-Credentials "true"   
Header set Access-Control-Expose-Headers "Authorization"       <- from a similar issue

Je sais qu'il existe d'autres problèmes résolus identiques/similaires. Mais je ne sais toujours pas quoi faire ou comment le faire ... Je l'apprécie vraiment si quelqu'un peut m'aider avec mon code !!

angularcorspreflight
5
Chris

Le navigateur effectue une demande OPTIONS avant de procéder à votre HttpGet. Vous devez ajouter un point de terminaison avec le même itinéraire que le HttpGet, en faire une demande HttpOptions, supprimer auth de ce point de terminaison et renvoyer un 200 OK qui devrait résoudre le problème.

4
Wesley Coetzee

"Mon serveur est configuré comme ceci" - Ce n'est généralement pas pertinent. Examinez le message d'erreur: "La réponse pour le contrôle en amont a un code d'état HTTP non valide 401"

Cela ne dit rien des choses que vous avez mentionnées avec Access-Control-Allow-Thing.

  • Le navigateur fait une demande OPTIONS pour demander si une demande d’origine croisée est autorisée.
  • La réponse indique "Votre nom d'utilisateur et votre mot de passe sont incorrects".

Puisque le navigateur n'a pas reçu l'autorisation de faire la demande d'origine croisée: Il n'a pas envoyé de nom d'utilisateur ni de mot de passe.

Vous devez rechercher le code sur votre serveur qui exécute l'autorisation et les demandes exclude OPTIONS à partir de ce test. Tout le monde devrait pouvoir faire la demande OPTIONS, pas seulement les personnes qui ont le nom d'utilisateur et le mot de passe.

4
Quentin

Sur le serveur, si vous utilisez Node.js, vous pouvez envisager d’autoriser toutes les demandes OPTIONS afin que les navigateurs n’aient pas besoin de s’authentifier pour vérifier les méthodes autorisées sur l’API serveur/REST.

Considérons le code comme: 

if (req.method === 'OPTIONS') {
    res.status(200).end();
} else {
    next();
}
1
Amos Wachanga