Angular/Node/Проблемы с перекрестным соединением /Passport Pass - Включить аутентификацию CORS Passport Facebook

Было два дня и миллион попыток включить CORS при попытке аутентифицировать пользователя с помощью Facebook с помощью Passport в NodeJS/Express.

Ошибка, которую я получаю в Chrome, такова:

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%3A8080%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=598171076960591. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

Маршруты, которые я использую, просты:

// =====================================
// FACEBOOK ROUTES =====================
// =====================================
// route for facebook authentication and login

app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));

// handle the callback after facebook has authenticated the user
app.get('/auth/facebook/callback',
    passport.authenticate('facebook', {
        successRedirect : '/home',
        failureRedirect : '/login'
    }));

Так называется маршрут в моем файле angularJS (я также попробовал установку withCredentials: true):

$http.get('/auth/facebook')
    .success(function(response) {

    }).error(function(response){

    });

Я пробовал десяток решений, которые я нашел здесь, на StackOverflow и других форумах.

Я попытался добавить это к моим маршрутам в файлах route.js:

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name");
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Credentials', true);

  if ('OPTIONS' == req.method) {
      res.send(200);
  } else {
      next();
  }
});

Я попытался добавить это в файл server.js(обратите внимание, что я изменил заголовок на setHeader, но я пробовал оба):

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Credentials', true);

  if ('OPTIONS' == req.method) {
    res.send(200);
  } else {
    next();
  }

 });

 require('./app/routes.js')(app, passport);

Я попытался добавить это в свой файл app.js(конфигурации angularJS):

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

В любом случае, я не знаю, что еще делать. Все, что я нашел в Интернете, не работает. Есть ли шанс, что это связано со мной, используя AngularJS Routing? Я не вижу причин, почему это имеет значение, но у меня не было догадок.

Моя ситуация очень похожа на эту: Angular/Node/Экспресс/Паспорт - Проблемы при подключении к facebook (CORS)

Спасибо заранее!

Ответ 1

У меня была эта проблема и почти дошла до того момента, когда я был уверен, что не смогу найти решение, но снова посмотрю на простой учебник (http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/) это для меня. Я пытался сделать вызов API от Angular до Node.js, который всегда будет приносить вам эти ошибки XMLHttpRequest, несмотря на то, что вы настраиваете на сервере, CORS или нет! CORS не является приспособлением - если вы открыли свою консоль в сети Chrome, вы обнаружите, что ваш запрос в Google или Facebook или на какой-либо другой сторонний сайт не подлежит контролю - он был вызван перенаправлением 302, которое было отправлено обратно ваш интерфейс, что-то, что Angular.js или любая другая структура не может управлять, поэтому вы не можете добавить "Контроль доступа разрешить происхождение" в этот запрос.

Решение состоит в том, чтобы сделать кнопку или текст, который говорит "Войти с _____" LINK. Литеральная ссылка <a href="/auth/facebook"></a>. Что это.

Конечно, я также встретился с множеством других камней преткновения и gotchas в этом процессе. Я попытался не использовать промежуточное ПО по умолчанию для passport.authenticate('facebook'), но попытался обернуть его в function(req, res, next){ ... }, думая, что что-то сделает, но это не так.

Ответ 2

У меня также была проблема с входом в facebook и cors, но не с паспортом в NodeJS/Express, мое приложение - java (spring mvc) + angular. Мне удалось передать проблему, изменив мою начальную функцию входа fb:

$scope.loginWithFacebook = function () {
    $http({
        method: 'GET',
        url: 'auth/facebook',
        dataType: 'jsonp'
    }).success(function(data){
        console.log('loginWithFacebook success: ', data);
    }).error(function(data, status, headers, config) {
        console.log('loginWithFacebook error: ', data);
    });
}

с

$scope.loginWithFacebook = function() {
    $window.location = $window.location.protocol + "//" + $window.location.host + $window.location.pathname + "auth/facebook";
};

Надеюсь, что это поможет!