AngularJS $ http, CORS y autenticación http

Debido a que el uso de la autenticación CORS y http con AngularJS puede ser complicado, edité la pregunta para compartir una lección aprendida. Primero quiero agradecer a igorzg. Su respuesta me ayudó mucho. El escenario es el siguiente: desea enviar una solicitud POST a un dominio diferente con el servicio AngularJS $ http. Hay varias cosas difíciles de tener en cuenta al obtener AngularJS y la configuración del servidor.

Primero: en la configuración de su aplicación debe permitir la llamada entre dominios

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

Segundo: debe especificar conCredentials: true y nombre de usuario y contraseña en la solicitud.

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

Tercero: configuración del servidor. Debes proveer:

 /** * Cors usage example. * @author Georgi Naumov * gonaumov@gmail.com 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"); 

Por cada solicitud Cuando reciba OPCIÓN debe pasar:

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

La autenticación HTTP y todo lo demás viene después de eso.

Aquí hay un ejemplo completo del uso del lado del servidor con 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(); } ?> 

Hay un artículo en mi blog sobre este tema que se puede ver aquí .

No, no tienes que poner credenciales, tienes que poner encabezados en el lado del cliente, por ejemplo:

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

Y y en el lado del servidor tiene que poner encabezados para este es un ejemplo para 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(); } }); 

Para hacer una solicitud CORS uno debe agregar encabezados a la solicitud junto con la misma que necesita para verificar que mode_header esté habilitado en Apache.

Para habilitar encabezados en Ubuntu:

 sudo a2enmod headers 

Para que el servidor php acepte solicitudes de diferentes usos de origen:

 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"