Question

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

我有一个带有按钮的React前端（：3333）。

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

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

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

当使用Express中的后端和按钮时，Auth工作正常，但我想使用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中，（从运行express并在localhost上做出反应）并点击/ 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

React Passport Auth与Express Localhost问题，cors（）未启用

0 个答案: