Fatal编程技术网
  • javascript/
  • Javascript 平均堆栈授权错误：否'；访问控制允许原点'；头球？

Javascript 平均堆栈授权错误：否'；访问控制允许原点'；头球？

javascript facebook angularjs node.js express

Javascript 平均堆栈授权错误：否'；访问控制允许原点'；头球？,javascript,facebook,angularjs,node.js,express,Javascript,Facebook,Angularjs,Node.js,Express,我正在尝试在我的MEAN stack应用程序上进行facebook授权。我正在使用passport和passport-facebook。我没有使用jade或ejs，我想使用纯angularjs。当我运行应用程序并单击“登录”按钮时，出现以下错误： XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…2Flocalhost%3A3030%

我正在尝试在我的MEAN stack应用程序上进行facebook授权。我正在使用
passport
和
passport-facebook
。我没有使用
jade
或
ejs
，我想使用纯angularjs。当我运行应用程序并单击“登录”按钮时，出现以下错误：

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…2Flocalhost%3A3030%2Fauth%2Ffacebook%2Fcallback&client_id=....  
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3030' is therefore not allowed access.
我做了一些研究，发现node
cors
模块可以解决这个问题，但它没有

我做错了什么，我该如何纠正？

这是我的routes.js文件（服务器端）：

这是我的
passport.js
文件（服务器端）：
注意：
clientID
、
clientSectret
和
callbackURL
位于另一个文件（
config.js
）中。但它们是有效的

passport.use(new FacebookStrategy({
    clientID: config.facebookAuth.clientID,
    clientSecret: config.facebookAuth.clientSecret,
    callbackURL: config.facebookAuth.callbackURL
    },
    function(accessToken, refreshToken, profile, done) {
        User.findOne({ oauthID: profile.id }, function(err, user) {
            if(err) { console.log(err); }
            if (!err && user != null) {
                done(null, user);
            } else {
                var user = new User({
                    oauthID: profile.id,
                    name: profile.displayName,
                    created: Date.now()
                });
                user.save(function(err) {

                    if(err) {
                        console.log(err);
                    } else {
                        console.log("saving user ...");
                        done(null, user);
                    }
                });
            }
        });
    }
));


// serialize and deserialize
passport.serializeUser(function(user, done) {
    console.log('serializeUser: ' + user._id)
    done(null, user._id);
});
passport.deserializeUser(function(id, done) {
    User.findById(id, function(err, user){
        console.log(user)
        if(!err) {done(null, user);}
        else {done(err, null)}
    });
});
这是我的express配置文件：
express.js
（服务器端）：

客户端

这是我的html文件：

<body>
    <div class="navbar-right" ng-controller="LoginCtrl">
        <form class="navbar-form" >
            <a class="btn btn-primary" ng-click="signin()" ng-show="!identity.isAuthenticated()">Sign in</a>
            <a class="btn btn-primary" ng-click="signout()" ng-show="identity.isAuthenticated()">Sign out | {{identity.currentUser.name}}</a>
        </form> 
    </div>
    <ng-view></ng-view>
下面是我处理服务器通信的服务（authService.js）：

您不能向其他地址发出ajax请求。即使地址相同，端口不同，您也会遇到“同源策略”问题

您可以使用nginx并使用
proxy\u pass
重定向请求

检查：

差不多

server
{
  listen 80; 
  server_name localhost;

  location /auth/facebook/request {
    proxy_pass http://(...)facebook.com/(...);
  }
}
我不确定这是否解决了你的问题，但我最近也经历了类似的事情，试图在facebook上登录一个angular应用程序。确保在facebook应用程序设置页面中

https://developers.facebook.com/apps/{your_app_id}/settings/
将“站点URL”更改为您的本地主机。例如：

http://localhost:8080/
你好，我不确定这是否有助于你尝试

    app.config(['$httpProvider', function ($httpProvider){
      $httpProvider.defaults.useXDomain = true;
   // $httpProvider.defaults.cache = true;
      $httpProvider.defaults.withCredentials = true;
   // $httpProvider.defaults.xsrfCookieName = '';
   // $httpProvider.defaults.xsrfHeaderName = '';
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
这个答案充其量只是误导。我不会说有误导性，但相当不完整。是的，使用CORS可以向不同的域发出请求，但必须得到服务器的允许。我相信facebook API允许，但如果OP使用的其他API可能没有Access Control Allow Origin头，同样的问题也会出现。目前使用Nginx的另一个原因是，并非所有浏览器都完全支持此功能。我面临着类似的问题..你有解决这个问题的办法吗。。？“站点URL”设置在哪里？自从我发布此信息后，马特·facebook用户界面发生了很大变化，请转到应用程序仪表板，选择左侧的“设置”，您将能够添加“域”和“站点URL” 
server
{
  listen 80; 
  server_name localhost;

  location /auth/facebook/request {
    proxy_pass http://(...)facebook.com/(...);
  }
}

https://developers.facebook.com/apps/{your_app_id}/settings/   

http://localhost:8080/

    app.config(['$httpProvider', function ($httpProvider){
      $httpProvider.defaults.useXDomain = true;
   // $httpProvider.defaults.cache = true;
      $httpProvider.defaults.withCredentials = true;
   // $httpProvider.defaults.xsrfCookieName = '';
   // $httpProvider.defaults.xsrfHeaderName = '';
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);