与AngularJS防爆preSS会议 [英] Express sessions with AngularJS

问题描述

我想创建一个使用前preSS和angularjs一个简单的登录。角的js应用程序在一个单独的服务器（咕噜服务器localhost：9000）运行，而前preSS应用的另一个端口上运行。对于我的前preSS的应用程序，我有以下设置标题：

I am trying to create a simple login using express and angularjs. The angular js app runs on a separate server (grunt server localhost:9000) while the express app runs on another port. For my express app, I have the following headers set:

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:9000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

我运行的角度1.0.7，这意味着我可以在配置步骤设置一些默认值：

I am running angular 1.0.7, meaning that I can set some defaults in the config step:

// Add COR ability
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

而在$ HTTP请求withCredentials：

And the withCredentials on the $http request:

$http({
   method : "GET",
   withCredentials : true,
   url : apiEndpoint + '/session'
}, success);

因此​​，与我的应用程序在登录后，会创建一个会话，cookie可以在响应中可以看出。使用Chrome的调试工具，我可以看到连接会话cookie被下一个后续请求（上述会议电话）发送。在服务器上，但是， req.session 属性仍然是空的。当然，我可以只托管与前preSS角应用和解决这一切，但我宁愿保持两个项目/服务器中分离出来。

So after logging in with my app, a session is created and a cookie can be seen in the response. Using chrome debugging tools, I can see that the connect session cookie is being sent with the next subsequent request (the session call above). On the server, however, the req.session property is still empty. Of course I could just host the angular app with express and get around all of this, but I'd rather keep the two projects/servers separate.

这是 /会话的要求，与连接到该请求的连接会话cookie的观点：

This is a view of the /session request, with the connect session cookie attached to the request:

推荐答案

我不得不乱用一些不同的东西来得到这个工作各地。首先，我升级到边缘棱角分明，一些值不能在全球范围违约，我需要$ HTTP。

I had to mess around with a few different things to get this working. First, I upgraded to the edge angular, as some values could not be globally defaulted on $http that I needed.

在角配置（）一步，我说：

// Add COR ability
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

在EX preSS，我创建了一个角中间件：

In express, I created an angular middleware:

exports.angularHeaders = function(req, res, next){
    res.header("Access-Control-Allow-Origin", '{{insert your ui endpoint}}');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
};

这篇关于与AngularJS防爆preSS会议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！