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

Question

我正在尝试使用passport-facebook模块在nodejs，angularjs中集成我的应用程序的facebook登录。

我可以在没有angularjs的情况下集成facebook身份验证，但是当我使用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

下面是我的角度代码

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（）

的多个标题更改

Answer 1

您正在尝试对URL进行ajax调用，并且浏览器因跨域安全性而拒绝该Ajax请求。

有几个可能的原因：

1. 该网址的域名不允许跨源请求。
2. 您没有以正确的方式提出请求，以便交叉来源请求成功。
3. 您的请求未正确形成（定位到正确的网址或使用正确的选项发送）。

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

对于您发布的内容有一点令人困惑的是，您显示的$http()来电的网址与您在错误消息中获得的网址不同，所以我想知道您是否是查看错误的错误代码。

Answer 2

解决方案：

链接https://www.facebook.com/dialog/oauth?...并非设计用于将其称为ajax，因为它必须将用户重定向到Facebook登录页面（因此当您通过ajax调用它时，重定向是不可能的）。

而不是使用ajax请求只需在html中准备正确的元素：

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

这有效：）

Answer 3

这就是我所做的，以避免Angular将facebook auth对话API称为AJAX请求。

在 Angular Controller Function 中使用'window.location="http://localhost:3000/auth/facebook"';，将请求发送到包含passport.authenticate内容的 Express Server 。

示例：

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

Answer 4

此解决方案对我有效，添加到了cors中以表达应用程序

var cors = require('cors')
var app = express()

app.use(cors())