web-dev-qa-db-fra.com

Comment utiliser HTTPS dans AngularJS?

J'utilise AngularJS, $resource & $http et travailler avec apis, cependant, pour des raisons de sécurité, je dois faire une requête HTTPS (fonctionne sous le protocole HTTPS).

Comment utiliser https dans AngularJS. Merci de votre aide.

javascriptnode.jsangularjsangular-ui
42
Dick Van Ocampo

Utilisez l’API $http Comme vous le feriez normalement:

$http.get('/someUrl').success(successCallback);

si votre application est en cours de traitement via HTTPS, tous les appels que vous effectuez sont dirigés vers le même hôte/port, etc., et donc également via HTTPS.

Si vous utilisez les URI complets pour vos demandes, par exemple, $http.get('http://foobar.com/somePath') alors vous devrez changer vos URI pour utiliser https

27
craigb

Pour une raison quelconque, Angular enverrait toutes les demandes via HTTP si vous n'avez pas de queue/à la fin de vos demandes. Même si la page elle-même est servie via HTTPS.

Par exemple:

$http.get('/someUrl').success(successCallback);  // Request would go over HTTP even if the page is served via HTTPS

Mais si vous ajoutez un interligne/tout fonctionnera comme prévu:

$http.get('/someUrl/').success(successCallback);  // This would be sent over HTTPS if the page is served via HTTPS

EDIT: La cause principale de ce problème est que Angular examine les en-têtes réels du serveur. Si vous avez un passage interne incorrect de données http via https, il restera des en-têtes http et Angular les utilisera si vous n’ajoutez pas/à la fin. c’est-à-dire si vous avez un serveur NGINX servant du contenu via https, mais transmettant des demandes à Gunicorn via le serveur principal via http, vous risquez de rencontrer ce problème. Pour résoudre ce problème, vous devez transmettre les en-têtes corrects à Gunicorn. Ainsi, votre structure aurait l’impression d’être servie via https. Dans NGINX, vous pouvez le faire avec la ligne suivante:

proxy_set_header X-Forwarded-Proto $ scheme;

26
Danil

J'ai récemment rencontré des problèmes similaires avec Angular 1.2.26, mais uniquement lors de l'interaction via un équilibreur de charge - ce qui peut éliminer les en-têtes liés à https ... pas encore sûr de la cause. J'ai eu recours à ceci:

uri = $location.protocol() + "://" + $location.Host() + "/someUrl"

Vous voudrez peut-être ajouter $ location.port () également si vous utilisez un port non standard.

9
Cork