Question

我正在尝试移动一个简单的快速应用程序来做出反应，但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>
      )
   }
}

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

而

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

Answer 1

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

节点，护照和反应的Github身份验证失败

1 个答案: