AngularJS $http、CORS 和 http 身份验证 [英] AngularJS $http, CORS and http authentication
问题描述
因为在 AngularJS 中使用 CORS 和 http 身份验证可能会很棘手,所以我编辑了这个问题以分享一个经验教训.首先我要感谢igorzg.他的回答对我帮助很大.场景如下:您想使用 AngularJS $http 服务将 POST 请求发送到不同的域.在获取 AngularJS 和服务器设置时,有几件棘手的事情需要注意.
Because using CORS and http authentication with AngularJS can be tricky I edited the question to share one learned lesson. First I want to thank igorzg. His answer helped me a lot. The scenario is the following: You want to send POST request to a different domain with AngularJS $http service. There are several tricky things to be aware of when getting AngularJS and the server setup.
首先:在您的应用程序配置中,您必须允许跨域调用
First: In your application config you must allow cross domain call
/**
* 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 和用户名和密码指定为要求.
Second: You must specify withCredentials: true and username and password into request.
/**
* 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: Server setup. You must provide:
/**
* 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 时,您必须通过:
For every request. When you receive OPTION you must pass:
/**
* 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 身份验证和其他一切都在此之后.
HTTP authentication and everything else comes after that.
这里是使用 php 的服务器端的完整示例.
Here is complete example of usage of server side with 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();
}
?>
我的博客上有一篇关于这个问题的文章可以看到 这里.
There is an article on my blog about this issue which can be seen here.
推荐答案
不,您不必放置凭据,您必须在客户端放置标头,例如:
No you don't have to put credentials, You have to put headers on client side eg:
$http({
url: 'url of service',
method: "POST",
data: {test : name },
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
});
并且在服务器端,您必须将标头放入此示例,这是 nodejs 的示例:
And and on server side you have to put headers to this is example for 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();
}
});
这篇关于AngularJS $http、CORS 和 http 身份验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!