Passport AngularJS ExpressJS:Access-Control-Allow-Origin 不允许 Origin null

Posted

技术标签:

【中文标题】Passport AngularJS ExpressJS:Access-Control-Allow-Origin 不允许 Origin null【英文标题】:Passport AngularJS ExpressJS: Origin null is not allowed by Access-Control-Allow-Origin 【发布时间】:2013-11-23 11:30:24 【问题描述】:

当我尝试使用 angular.js 的 $http 模块来授权 twitter 应用程序时,我总是得到:

XMLHttpRequest cannot load https://api.twitter.com/oauth/authenticate?oauth_token=something. Origin null is not allowed by Access-Control-Allow-Origin. 

客户代码:

$http(
   method: 'GET',
   headers:  "Content-Type": undefined ,
   url: '/oauth/twitter'
);

服务器代码:

app.configure(function () 
   app.use(express.cookieParser());
   app.use(express.cookieSession( secret: 'tobo!', cookie:  maxAge: 3600 ));

   app.use(express.session(secret: 'secret'));
   app.use(passport.initialize());
   app.use(passport.session());
);

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

app.get('/oauth/twitter', passport.authenticate('twitter'), function (req, res) 
// The request will be redirected to Twitter for authentication, so this
// function will not be called.
console.log('ouath/twitter')
);

app.get('/oauth/twitter/callback', passport.authenticate('twitter',  successRedirect:  '/', failureRedirect: '/login' ));

但如果我使用带有 oauth/twitter 地址的超链接,它可以正常工作。我不知道是什么问题。大多数人说不允许来源,但'*'应该允许每个地址都连接到服务器。

【问题讨论】:

我有同样的问题,我找不到解决办法!问题解决了吗? 我也有同样的问题。但是当你说直接使用超链接时,你是如何在routeProvider中排除它的?您是否将其加载到角度应用程序之外?对不起,如果这个问题太琐碎了,我只是 angular & passport & expressjs 的新手 你找到解决这个问题的方法了吗?我面临与backbonejs相同的问题 我遇到了类似的问题。我什至有一个指向 oauth/twitter 的直接超链接,但它给了我一个“Access-Control-Allow-Origin”错误。原来 jquerymobile 的导航正在劫持请求并通过 ajax 发送它。长话短说,您不能使用 ajax 进行跨站点资源访问。我找不到解决办法 【参考方案1】:

我遇到了同样的问题,我找到的唯一解决方案是使用超链接(正如您在帖子中所说)。我认为出于安全原因,您不能使用 ajax 请求。但是,使用超链接对我有用,我可以授权我的用户。

为什么不使用超链接?有什么问题吗?

【讨论】:

我希望将此功能包含在与我的其他 API 相同的位置 如何将token等敏感数据回传给客户端?【参考方案2】:

您不能使用导致重定向到 Twitter 的 AJAX 请求,因为使用 Twitter 进行身份验证意味着实际的用户交互,用户必须登录到他们的 Twitter 帐户并授予您的应用访问(部分)他们的帐户。

您要么必须将浏览器的位置更改为/oauth/twitter,要么使用该 URL 创建一个新窗口(并在身份验证完成后向您的主窗口发出信号)。

【讨论】:

【参考方案3】:

只需在客户端代码中调用您的超链接即可。

window.location.href=''

【讨论】:

以上是关于Passport AngularJS ExpressJS:Access-Control-Allow-Origin 不允许 Origin null的主要内容,如果未能解决你的问题,请参考以下文章

使用 Express/Passport、AngularJS 和 ensureLoggedIn 的身份验证和路由在“/”url 上不起作用

Node、Express、Oauth2 和 Passport 的 Angularjs CORS 问题

Passport AngularJS ExpressJS:Access-Control-Allow-Origin 不允许 Origin null

如何在 Angular 客户端中处理 passport-facebook 回调?

Laravel Passport APi - 隐式授权

Angularjs $http 似乎不理解响应中的“Set-Cookie”