使用node、passport和react进行Github身份验证失败

我正试图将一个简单的express应用程序移到react上，但github身份验证在简单的expressapp上运行良好（不是同构的），但由于react而变得复杂。

有一个按钮可以点击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 + '...');
});

app/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，因为我希望一旦成功，我可以订购重定向和其他东西，这是我的第二个问题。。。但在任何情况下，我肯定都可以这样做