AngularJS $http,CORS和http认证

前端之家收集整理的这篇文章主要介绍了AngularJS $http,CORS和http认证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
因为使用CORS和http认证与AngularJS可以是棘手的我编辑的问题,以分享一个学到的教训。首先我要感谢igorzg。他的答案帮了我很多。方案如下:您想使用AngularJS $ http服务将POST请求发送到其他域。在获取AngularJS和服务器设置时,有一些棘手的事情需要注意。

第一:
在您的应用程序配置中,您必须允许跨域调用

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

第二:
您必须指定withCredentials:true和用户名和密码
请求。

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

Т:
服务器设置。您必须提供:

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

对于每个请求。当您收到OPTION时,您必须通过:

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

HTTP身份验证和其他所有事情。

这里是使用PHP的服务器端的完整示例。

<?PHP
/**
 *  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:8080");
header("Access-Control-Allow-Methods: GET,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();
}
?>

在我的博客上有一篇关于这个问题的文章,可以看到here

没有你不必输入凭证,你必须把头放在客户端例如:
$http({
        url: 'url of service',data: {test :  name },headers: {
                    'Content-Type': 'application/json; charset=utf-8'
        }
    });

并且在服务器端,你必须把头放到这里是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,Accept-Version,Content-Length,Content-MD5,Date,X-Api-Version,X-File-Name","AccessControlAllowMethods": "POST,GET,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();
    }


});
原文链接:https://www.f2er.com/angularjs/146915.html

猜你在找的Angularjs相关文章