Реагировать на проверку подлинности паспорта с помощью Express Localhost, если cors () не включен - PullRequest
Новая
       7

Реагировать на проверку подлинности паспорта с помощью Express Localhost, если cors () не включен

0 голосов
/ 01 мая 2018

Я хочу, чтобы интерфейс React ударил по маршруту на моем экспресс-бэкэнде, что позволит перенаправить на github auth, а затем, при успешном завершении, вернуть результаты auth, чтобы я мог сохранить и использовать их в front end , Моя проблема такова:

У меня есть интерфейс 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);
        })

Auth отлично работает, когда используется только бэкэнд и кнопки в экспрессе, но я хочу использовать React-интерфейс и нажать эти точки на бэкэнде, чтобы Auth спереди. Обычная вещь? Да.

Экспресс-бэкэнд app.js (server.js) выглядит в основном так (немного упрощенно): 

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()); на старте будет достаточно. Чего мне не хватает?

Вот репозиторий github, который я сделал для проверки подлинности, и он точно повторил эту проблему. https://github.com/croft1/passport-react-express-auth-demo

...