AngularJS $http、CORS和http身份验证
AngularJS $http、CORS和http身份验证
提问于 2014-01-30 19:21:45
因为在AngularJS中使用CORS和http身份验证可能比较棘手，所以我编辑了这个问题来分享一个经验教训。首先，我要感谢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'
}
});Тhird:服务器设置。您必须提供：
/**
* 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");对于每个请求。当你收到选项时，你必须通过：
/**
* 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, 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();
}
?>在我的博客上有一篇关于这个问题的文章，可以在here上看到。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-30 19:54:04
不，你不需要放凭证，你必须放在客户端的头上，例如：
$http({
url: 'url of service',
method: "POST",
data: {test : name },
withCredentials: true,
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, 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();
}
});Stack Overflow用户
发布于 2016-03-16 01:23:49
要进行CORS请求，必须向请求添加标头，并检查在Apache中是否启用了mode_header。
要在Ubuntu中启用headers：
sudo a2enmod headers对于php服务器接受来自不同来源的请求，请使用：
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"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21455045
复制相关文章
相似问题