2016-07-26 104 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,因爲我希望成功時我可以訂購重定向和其他東西,否則我的第二個問題......但無論如何我覺得應該有可能做到這一點無論哪種方式

回答