XMLHttpRequest无法加载https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=

我正在尝试整合Facebooklogin我的应用程序在nodejs,angularjs使用passport facebook模块。

我可以整合Facebook的身份validation没有angularjs,但是当我使用angular http.get('/auth/facebook')我得到下面的错误

 XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%2Flocalhost%3A1439%2Fauth%2Ffacebook%2Fcallback&client_id=xxxxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1439' is therefore not allowed access. app.js:153 err 

以下是我的angular码

 var headers = { 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8', 'Content-Type': 'text/html' }; $scope.fblogin=function(){ // $window.location.href='/auth/facebook'; $http({ url:'/auth/facebook', method:'GET', headers: headers }).success(function(data){ console.log(data); }).error(function(){ console.log('err'); }); }; pp.config(['$routeProvider','$httpProvider', function($routeProvider,$httpProvider) { $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.headers.common = 'Content-Type: application/json'; delete $httpProvider.defaults.headers.common['X-Requested-With']; 

的NodeJS

 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); 

**注意:**我已经尝试更改$ http.get()的多个标头更改

您正试图对URL进行ajax调用,并且由于跨源安全性,浏览器拒绝该ajax请求。

这有几个可能的原因:

  1. 该url的网域不允许交叉来源请求。
  2. 您没有以正确的方式提出请求来使得跨源请求成功。
  3. 您的请求未正确形成(无论是针对正确的url还是使用正确的选项发送)。

仅供参考,您设置允许来源标头的node.js代码完全与尝试向Facebook发送ajax调用的浏览器代码无关。 该代码将允许其他人的网站向您的node.js服务器发出跨源请求。


有一件事对你发布的内容有点混淆,那就是你显示的$http()调用的URL不是你在错误信息中获得的URL,所以我想知道你是否看错了代码为错误。

解:

链接https://www.facebook.com/dialog/oauth?...是不是devise为调用它作为Ajax,因为它必须REDIRECT用户到Facebook的login页面(所以当你通过Ajax调用,然后redirect是不可能的)。

而不是做的Ajax请求准备在HTML适当的元素:

<a href="https://www.facebook.com/dialog/oauth?..." > ... </>

这工作:)

这是我所做的,以避免Angular调用Facebook身份validation对话API作为AJAX请求。

使用'window.location="http://localhost:3000/auth/facebook"'; 在你的angular度控制器function从你发送请求到你的快递服务器 ,其中包含passport.authenticate东西。

例:

 $scope.authFacebook = function() { window.location="http://localhost:3000/facebook" }