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 !!
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.
"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.
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.
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();
}