AngularJS $ http，CORS和httpauthentication

因为在AngularJS中使用CORS和httpauthentication可能会非常棘手，所以我编辑了这个问题来分享一个有用的课程。 首先我要感谢igorzg。 他的回答帮了我很多。 该scheme如下：您想通过AngularJS $ http服务将POST请求发送到不同的域。 获取AngularJS和服务器设置时需要注意几件棘手的事情。

首先：在您的应用程序configuration中，您必须允许跨域调用

/** * Cors usage example. * @author Georgi Naumov * [e-mail] for contacts and * suggestions. **/ app.config(function($httpProvider) { //Enable cross domain calls $httpProvider.defaults.useXDomain = true; }); 

第二：你必须指定withCredentials：true和用户名和密码。

  /** * Cors usage example. * @author Georgi Naumov * [e-mail] 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 * [e-mail] 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 * [e-mail] for contacts and * suggestions. **/ if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { header( "HTTP/1.1 200 OK" ); exit(); } 

HTTPauthentication和其他一切都在此之后。

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

 <?php /** * Cors usage example. * @author Georgi Naumov * [e-mail] 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(); } ?> 

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

Answer 1

不，你不必把凭据，你必须把标题在客户端，例如：

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

Answer 2

为了创buildCORS请求，必须在请求中添加头文件，同时需要检查在Apache中是否启用了mode_header。

在Ubuntu中启用标题：

 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"