vcenter - AngularJS $ http, CORS y autenticación http

vsphere web client 6.5 download

Question

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
 *  [email protected] 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
  *  [email protected] 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
 *  [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");

Por cada solicitud Cuando reciba OPCIÓN debe pasar:

/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  [email protected] 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.

<?php
/**
 *  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:8080");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

if($_SERVER[''REQUEST_METHOD''] == ''OPTIONS'') {
   header( "HTTP/1.1 200 OK" );
   exit();
}


$realm = ''Restricted area'';

$password = ''somepassword'';

$users = array(''someusername'' => $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 here .

Answer 1

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


});

Answer 2

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"