Authentification AngularJS $ http, CORS et http

Parce que l’utilisation de l’authentification CORS et HTTP avec AngularJS peut être délicate, j’ai modifié la question pour partager une leçon apprise. Je veux d’abord remercier igorzg. Sa réponse m’a beaucoup aidé. Le scénario est le suivant: Vous souhaitez envoyer une requête POST à ​​un autre domaine avec le service AngularJS $ http. Il y a plusieurs choses délicates à prendre en compte pour obtenir AngularJS et la configuration du serveur.

Premièrement: dans votre configuration d’application, vous devez autoriser les appels interdomaines

/** * Cors usage example. * @author Georgi Naumov * [email protected] for contacts and * suggestions. **/ app.config(function($httpProvider) { //Enable cross domain calls $httpProvider.defaults.useXDomain = true; }); 

Deuxièmement: vous devez spécifier withCredentials: true et nom d’utilisateur et mot de passe dans la demande.

  /** * Cors usage example. * @author Georgi Naumov * [email protected] for contacts and * suggestions. **/ $http({ url: 'url of remote service', method: "POST", data: JSON.ssortingngify(requestData), withCredentials: true, headers: { 'Authorization': 'Basic bashe64usename:password' } }); 

Troisième: Configuration du serveur. Vous devez fournir:

 /** * Cors usage example. * @author Georgi Naumov * [email protected] for contacts and * suggestions. **/ header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Origin: http://url.com:8080"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization"); 

Pour chaque demande Lorsque vous recevez une option, vous devez passer:

 /** * Cors usage example. * @author Georgi Naumov * [email protected] for contacts and * suggestions. **/ if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { header( "HTTP/1.1 200 OK" ); exit(); } 

L’authentification HTTP et tout le rest vient après.

Voici un exemple complet d’utilisation du côté serveur avec php.

  $password); if (isset($_SERVER['PHP_AUTH_USER']) == false || isset($_SERVER['PHP_AUTH_PW']) == false) { header('WWW-Authenticate: Basic realm="My Realm"'); die('Not authorised'); } if (isset($users[$_SERVER['PHP_AUTH_USER']]) && $users[$_SERVER['PHP_AUTH_USER']] == $password) { header( "HTTP/1.1 200 OK" ); echo 'You are logged in!' ; exit(); } ?> 

Il y a un article sur mon blog sur ce problème qui peut être vu ici .

Non, vous n’êtes pas obligé de mettre des informations d’identification, vous devez mettre des en-têtes côté client, par exemple:

  $http({ url: 'url of service', method: "POST", data: {test : name }, withCredentials: true, headers: { 'Content-Type': 'application/json; charset=utf-8' } }); 

Et et du côté du serveur, vous devez mettre en-tête cet exemple pour nodejs:

 /** * On all requests add headers */ app.all('*', function(req, res,next) { /** * Response settings * @type {Object} */ var responseSettings = { "AccessControlAllowOrigin": req.headers.origin, "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name", "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS", "AccessControlAllowCredentials": true }; /** * Headers */ res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials); res.header("Access-Control-Allow-Origin", responseSettings.AccessControlAllowOrigin); res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with"); res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods); if ('OPTIONS' == req.method) { res.send(200); } else { next(); } }); 

Pour faire une requête CORS, il faut append des en-têtes à la requête avec le même que celui dont il a besoin pour vérifier que mode_header est activé dans Apache.

Pour activer les en-têtes dans Ubuntu:

 sudo a2enmod headers 

Pour que le serveur php accepte les demandes provenant de différentes origines:

 Header set Access-Control-Allow-Origin * Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE" Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"