2016-07-26 103 views
0

我想移动一个简单的快速应用程序来作出反应,但github身份验证,它在简单的快速应用程序(而不是同构),工作正常,变得复杂的反应。Github身份验证与节点,护照和反应失败

有一个按钮用于github身份验证。

如果我点击与

<a href="/auth/github"> 

的按钮,然后验证成功

,但如果我使用一个onclick功能和xhr.get,那么它失败

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. 

登录.jsx

export default class Login extends React.Component { 

    handleClick (event) { 
     event.preventDefault() 
     let xhr = new XMLHttpRequest(); 
     xhr.open('get', '/auth/github'); 
     xhr.send(); 
    } 

    render() { 
     return (
     <div className="login"> 
      <button className="btn" id="login-btn" onClick={this.handleClick.bind(this)}> 
       <img src="/public/img/github_32px.png" alt="github logo" /> 
       <p>LOGIN WITH GUTHUB</p> 
      </button>  
     </div> 
    ) 
    } 
} 

这个失败!与控制允许来源错误。

export default class Login extends React.Component { 
    render() { 
     return (
      <div> 
       <a href="/auth/github"> 
        <div className="btn" id="login-btn"> 
         <img src="/public/img/github_32px.png" alt="github logo" /> 
         <p>LOGIN WITH GITHUB</p> 
        </div> 
       </a> 
      </div> 
    ) 
} 

这成功!

server.js

var express = require('express'); 
var mongoose = require('mongoose'); 
var passport = require('passport'); 
var session = require('express-session'); 

var routes = require('./app/routes'); 
var app = express(); 
require('dotenv').load(); 
require('./app/config/passport')(passport); 

mongoose.connect(process.env.MONGO_URI); 

app.use('/controllers', express.static(process.cwd() + '/app/controllers')); 
app.use('/public', express.static(process.cwd() + '/public')); 


app.use(session({ 
    secret: process.env.SECRET, 
    resave: false, 
    saveUninitialized: true 
})); 

app.use(passport.initialize()); 
app.use(passport.session()); 

routes(app, passport); 

var port = process.env.PORT || 8080; 
app.listen(port, function() { 
    console.log('Node.js listening on port ' + port + '...'); 
}); 

应用程序/ routes.js

module.exports = function (app, passport) { 

    app.route('/') 
     .get(function (req, res) { 
      res.sendFile(process.cwd() + '/public/index.html') 
     }) 

    app.route('/auth/github') 
     .get(passport.authenticate('github')); 

    app.route('/auth/github/callback') 
     .get(passport.authenticate('github', { 
      successRedirect: '/', 
      failureRedirect: '/login' 
     })); 

} 

我怎样才能使使用XHR这项工作?或者说,为什么它不起作用?

如果可能的话,我更愿意使用xhr,因为我希望成功时我可以订购重定向和其他东西,否则我的第二个问题......但无论如何我觉得应该有可能做到这一点无论哪种方式

回答