angularjs – Angular问题和“No’Access-Control-Allow-Origin’标题” – 使用OAuth 2,Passport,Express和Node

我有一个使用在节点上运行的OAuth 2的Web应用程序.使用EJS模板,我能够正确创建一个工作流,提示用户登录,验证,然后执行“GetUser”GET命令并将输出转储到屏幕.最近我试图删除EJS并希望让AnguarJS正常工作.

目前我已经删除了EJS并实现了Angular,但是有角度很多奇怪的事情发生了,我无法弄清楚为什么!

当我的用户点击“登录”时,他们应该被带到他们使用OAuth 2登录的另一个网站.这个过程在带有EJS的Node上工作正常,但是在我的控制器加载角度时,加载了正确的部分,但是没有数据.使用Chrome DEV工具查看此过程,我看到以下错误

XMLHttpRequest cannot load http://website/oauth/authorize?... 
No 'Access-Control-Allow-Origin'     
header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

甚至更奇怪的是,在网络选项卡中,我可以看到正确的请求URL!如果我将此URL复制并粘贴到另一个选项卡中,则执行“GetUser”命令,但随后节点崩溃并且我的页面失败.

我尝试过不同的浏览器,启用CORS和配置CORS.我知道问题在于Angular,因为我可以成功地使用与EJS相同的代码.我已将我的Angular代码放在下面,任何帮助都将不胜感激!

服务器端

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var config = require('./config.js')
var passport = require('passport');
var OAuth2Strategy = require('passport-oauth').OAuth2Strategy;
var session = require('express-session');

var index = require('./routes/index');
var login = require('./routes/login');
var logout = require('./routes/logout');

passport.serializeUser(function(user, done) {done(null, user);
});
passport.deserializeUser(function(obj, done) {done(null, obj);
});

// config
passport.use('Company', new OAuth2Strategy({
    authorizationURL: config.authorizationURL,
    tokenURL: config.tokenURL,
    clientID: config.clientID,
    clientSecret: config.clientSecret,
    callbackURL: config.callbackURL,
    passReqToCallback: true
},
function(req, accessToken, refreshToken, profile, done) {
    process.nextTick(function () {
        // store access token
        req.session.accessToken=accessToken;
        return done(null, profile);
    });
}
));

var app = express();
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({secret: 'secret'}))
app.use(passport.initialize());
app.use(passport.session());

// configure Express
app.get('/api/login', ensureAuthenticated, login.execute);
app.get('/api/logout', logout.execute);

app.get('/auth/company', 
passport.authenticate('company'), 
 function(req, res){
});

app.get('/auth/company/callback',
passport.authenticate('company', { failureRedirect: '/' }),
function(req, res) {
 console.log('comming back from company');   
 res.redirect('/api/login');
}); 


app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

function ensureAuthenticated(req, res, next) {
   if (req.isAuthenticated()) {
    return next();
    }
    res.redirect('/')
}

module.exports = app;

Login.js(路线)

var request = require('request');

exports.execute = function (req, res) {
    console.log(req.user);
    console.log(req.app.get('accessToken'));

    var accessToken = req.session.accessToken;
    console.log("accessToken in loginjs" + accessToken);
    if(accessToken){
        var options = {
        url: 'http://company/getCurrentUser',
        headers: {
            Authorization: 'bearer ' + accessToken
        }
        };
        request.get(options, function(error, response, body){
            if(error){
               console.log('login.js inside error' + error);
               res.json('login.js inside error' + error);
        return;
            }
            console.log(response);
            res.render('account', { user: response });
        });
    }else{
        res.render('account', { user: req.user });
    }   
}

万维网

var debug = require('debug')('myApp');
var app = require('../app');

app.set('port', process.env.PORT || 8080);

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

客户端

app.js(棱角分明)##

angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap'])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'MainCtrl'
    })
    .when('/login', {
        templateUrl: 'views/account.html',
        controller: 'LoginCtrl'
    })      
    .otherwise({
        redirectTo: '/'
    }); 
}]);

login.js控制器

angular.module('MyApp')
.controller('LoginCtrl', ['$scope', 'Auth', function($scope, Auth){
    var user = Auth.authorize();
    $scope.user=user;
    $scope.headingTitle='Logged in page';
}]);

auth.js服务

angular.module('MyApp')
.factory('Auth', ['$resource', function($resource){
    return $resource('/auth/company', null, 
    {
        'authorize': {method: 'GET'}
    });
}]);

home.html部分路由到公司Oauth2

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="text-center">
        <p><a href="/login">Login via Company</a></p>
      </div>
    </div>
  </div>
</div>  

account.html部分显示用户数据

<div>
  <h1>You are logged in.</h1>
  <a href="/">Go home</a><br>
  <a href="/api/logout">Logout</a><br>
  <p>Dumping User: {{user}}</p>
</div>

编辑

我试过以下没有成功

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-     Requested-With, Access-Control-Allow-Origin');
    res.header("Access-Control-Max-Age", "86400"); // 24 hours
    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
   }
};
var app = express();
app.use(allowCrossDomain);

编辑2:

我做了一些挖掘,还注意到Angular没有被列为启动第二个URL.几乎就像有角度一样,将回调URL重新路由为它自己的单独调用.我附上了下面的图片

编辑3:

我一直在努力,但无法弄清楚为什么Angular会剥离我的标题!任何额外的输入将不胜感激!

编辑4:

我发现通过将下面的代码添加到Login按钮,我可以让网页加载路径而不是Angular.执行此操作并将链接指向/ auth / company而不是api / login后,我成功重定向到登录页面!

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="text-center">
        <p><a target="_self" href="/auth/company">Login via Company</a></p>
      </div>
    </div>
  </div>
</div>  

然而战斗继续,因为我登录后我被重定向到下面的图片 – 在节点内部我收到数据然而应用程序死亡并且没有显示/帐户页面.

最佳答案
我从不使用$resource而是使用$http.您还必须根据客户端的请求启用“withCredentials”.我也认为你不需要if(‘OPTIONS’== req.method)因为我从来没有需要这个.还有一点需要注意,您不能将通配符域“*”与凭证一起使用.您必须明确允许原点’http://127.0.0.1:8080‘并确保您使用的是127而不是localhost(否则您将遇到cookie问题).

     var req = {
                    method:'POST',
                    url: 'users/login',
                    data: {
                    },
                    withCredentials:true

                };

                $http(req).then(function (response) {                       
                    if( response.data.success ){                           
                    }
                    if( response.data.error){                           
                    }
                });

转载注明原文:angularjs – Angular问题和“No’Access-Control-Allow-Origin’标题” – 使用OAuth 2,Passport,Express和Node - 代码日志