使用节点、护照和反应的 Github 身份验证失败答案

【问题标题】：Github authentication with node, passport and react fails使用节点、护照和反应的 Github 身份验证失败
【发布时间】：2017-05-09 20:05:11
【问题描述】：

我正在尝试将一个简单的 express 应用程序移到 react 上，但是在简单的 express 应用程序（非同构）上运行良好的 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.

Login.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>
      )
   }
}

这失败了！！带有 control-allow-origin 错误。

而

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，因为我希望成功后我可以订购重定向和东西，否则这是我的第二个问题......但无论如何我觉得它应该可以做到无论哪种方式

【问题讨论】：

标签： javascript node.js authentication reactjs passport.js

【解决方案1】：

检查这个 cors npm 包并将其安装到服务器：https://www.npmjs.com/package/cors npm install cors 然后，在主要server.js app.use(cors())

【讨论】：