node.js - React Passport Auth with Express Localhost 问题与 cors() 未启用

Question

我希望让 React 前端在我的 Express 后端上找到一条路由，这将允许重定向到 github auth，然后在成功时返回 auth 结果，以便我可以在前端保存和使用它们。我的问题是：

我有一个带按钮的 React 前端 (:3333)。

<Button
     onClick={this.login.bind(this)}
     label={"Login with github"}
     />

运行 axios 以到达后端（：3000）路由以使用 Passport（准确地说是-github）登录。

 axios.get("http://localhost:3000/login/github")
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        })

仅在 express 中使用后端和按钮时，身份验证工作得很好，但我想使用 React 前端，并将后端的这些点打到前端的 Auth 上。一个普通的东西？是的。

Express 后端 app.js (server.js) 看起来大多是这样的（rm 有点方便）：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');
var passport = require('passport');
var Strategy = require('passport-github').Strategy;

var app = express();

// view engine setup
app.use(cors());
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

passport.use(new Strategy({
        clientID: 'correct id',
        clientSecret: 'correct secret id',
        callbackURL: 'http://localhost:3000/login/github/return'
    },

passport.serializeUser(function(user, cb) {
    cb(null, user);
});

passport.deserializeUser(function(obj, cb) {
    cb(null, obj);
});

// Initialize Passport and restore authentication state, if any, from the SESH
app.use(passport.initialize());
app.use(passport.session());

并定义了路线。/login 只是一个带有 login/github 链接的页面，它是为 Auth 进行重定向的页面，然后当然返回 /login/github/return

// Define routes.
app.get('/',
    function(req, res) {
        res.render('home', { user: req.user });

    });

app.get('/login',
    function(req, res){
        res.render('login');
    });

app.get('/login/github', cors(),
    passport.authenticate('github'));

app.get('/login/github/return', cors(),
    passport.authenticate('github', { failureRedirect: '/login' }),
    function(req, res) {
        res.redirect('/');
    });

现在，在 React 中（通过在 localhost 上运行 express 和 react）并点击 /login/github 端点会返回 XMLHttpRequest 错误：

XMLHttpRequest cannot load https://github.com/login/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fgithub%2Freturn&client_id=96e894aef351c46acd2e. 
`Redirect from 'https://github.com/login/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fgithub%2Freturn&client_id=96e894aef351c46acd2e'` 
to 'https://github.com/login?client_id=96e894aef351c46acd2e&return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3D96e894aef351c46acd2e%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Flogin%252Fgithub%252Freturn%26response_type%3Dcode' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access.

我原以为app.use(cors()); 一开始就加入就足够了。我错过了什么？

这是我为测试 auth 而制作的一个 github repo，它恰好准确地复制了这个问题。https://github.com/croft1/passport-react-express-auth-demo

标签： node.jsreactjsexpresspassport.jsaxios