Porque el uso de CORS y la autenticación de http con AngularJS puede ser complicado, he editado la pregunta para compartir aprendido la lección. En primer lugar quiero agradecer a igorzg. Su respuesta me ha ayudado mucho. El escenario es el siguiente: Se desea enviar solicitud POST a un dominio diferente con AngularJS $servicio http. Hay varios puntos a tener en cuenta al llegar AngularJS y el servidor de instalación.

Primero:
En la aplicación de configuración debe permitir que la cruz de dominio de la llamada

/**
 *  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 withCredentials: el verdadero y el nombre de usuario y la contraseña en
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:
La configuración del servidor. Usted debe proporcionar:

/**
 *  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");

Para cada solicitud. Cuando reciba la OPCIÓN que 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();
}

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

Aquí es ejemplo completo de 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, el cual puede ser visto aquí.

  • La pregunta es editado.
  • Estoy un poco confundido, es angularjs, pero se han envuelto en etiquetas PHP….¿me olvido de algo?
  • Esto es sólo un ejemplo de la lógica del lado del servidor. Texto debajo de «Tercera: la instalación del Servidor» es el lado del servidor de la lógica.
  • AngularJS es para el lado del cliente. Esta puede hablar a cualquier lado servidor, PHP, Ruby, Perl, Python, Java, JavaScript… podría seguir..
  • Es esta una pregunta? Es más como una buena respuesta 🙂

2 Comentarios

  1. 43

    No, usted no tiene que poner las credenciales, Usted tiene 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 en el lado del servidor tiene que poner los encabezados de esto es 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();
        }
    
    
    });
    • con CORS en general, hace que el servidor tiene que permitir que la todos encabezado (de Contenidos, Content-Length, Referer, etc…) presentes en el real, es decir, que no son OPCIONES, solicitud?
    • No, usted no tiene que permitir que todos los encabezados, puede permitir que sólo lo que usted necesita y usted puede incluso limitar también a un dominio.
    • ¿cómo puedo saber qué es lo que necesito?
    • Gracias por su agradable respuesta 🙂
    • Estoy confundido, ¿por qué no tengo para autenticar con el extremo si es asegurado por una autenticación básica de http?
    • Gracias por esta respuesta.
    • Cuando estoy tratando de implementar el código de arriba, estoy consiguiendo el siguiente error: Respuesta a la comprobación previa petición de no pasar el control de acceso de verificación: El valor de la ‘Access-Control-Allow-Origin’ encabezado en la respuesta no debe ser el comodín ‘*’ cuando la solicitud de credenciales del modo de «incluir». Origen ‘localhost:3000‘ es, por tanto, no se permite el acceso. Las credenciales modo de solicitudes iniciadas por el XMLHttpRequest es controlado por el withCredentials atributo.

  2. 3

    Para hacer un CORS solicitar uno debe agregar encabezados de la solicitud junto con la misma se requiere la comprobación de mode_header está habilitado en Apache.

    Para la habilitación de los encabezados en Ubuntu:

    sudo a2enmod headers

    Por php servidor para que acepte la petición de origen diferente uso:

    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"

Dejar respuesta

Please enter your comment!
Please enter your name here