Блог

Я надеюсь, что мой вопрос не покажется глупым. У меня есть довольно большой опыт работы с внешним интерфейсом, но очень мало с серверной частью.

У меня есть приложение React, которое использует Node.js и Express на серверной части. Я объявил "proxy": "http://localhost:3001" в своем package.json , что я не уверен на 100%, что это делает, но я знаю, что это помогает подключить мой сервер (который работает на порту 3001).

Проблема, с которой я столкнулся, возникла при настройке Auth0 в моем бэкэнде для проверки пользователей. Первое, что я заметил, было то, что я не смог выполнить запрос get к http://localhost:3001/login вместо этого мне пришлось перенаправить пользователя по URL http://localhost:3001/login . Я не уверен, почему это так, но я предполагаю, что это как-то связано с настройками Auth0.

После входа в систему Auth0 возвращает пользователям URL обратного вызова. Документы Auth0 рекомендуют использовать, localhost:3000/callback поскольку в этих документах также есть внутренняя конечная точка /callback . Однако после входа в систему пользователь просто перенаправляется на пустую страницу по адресу http://localhost:3000/callback , а конечная точка сервера никогда не попадает. Мне это показалось странным, поскольку я в основном копировал и вставлял из руководства Auth0 по настройке входа в систему с помощью Express.

В любом случае я обнаружил, что если я изменил URL обратного вызова на свой сервер на http://localhost:3001/callback , то выполняется код на стороне сервера. Это имеет смысл, отличный от того, что в документах Auth0 говорится об использовании порта 3000. Похоже, что, возможно, мой прокси-сервер должен как-то связать их.

Функция конечной точки обратного вызова выглядит следующим образом:

 router.get('/callback', function (req, res, next) {
    console.log('called')
    passport.authenticate('auth0', function (err, user, info) {
        if (err) {
            return next(err);
        }
        if (!user) {
            return res.redirect('/login');
        }
        req.logIn(user, function (err) {
            if (err) {
                return next(err);
            }
            const returnTo = req.session.returnTo;
            delete req.session.returnTo;
            res.redirect(returnTo || '/user');
        });
    })(req, res, next);
});
  

Когда это выполняется успешно, оно должно перенаправить пользователя на мою страницу пользователей по адресу localhost:3000/users однако, потому что я изменил маршрут обратного вызова на ‘localhost: 3001 / обратный вызов the callback endpoint is routing me to localhost: 3001 / users`.

Я могу отчасти видеть, что происходит. Когда я перехожу к URL-адресу, используя 3001, я попадаю в свои конечные точки. Когда я перехожу по URL-адресу, используя 3000, я просматриваю свои интерфейсные страницы. Я просто не понимаю, почему в документах Auth0 говорится, что мне следует использовать мой порт внешнего интерфейса для обратного вызова?

Я попытаюсь помочь, но я не уверен, что это ответ.

Если вы установите в своем package.json значение прокси на "proxy": "http://localhost:3001" , то в вашем приложении для отправки запроса вам не нужно использовать полный URL,

 axios.get('/login').then(res=>res.data).catch(err=>console.log(err));
  

Например, без установленного прокси

  axios.get('http://localhost:3001/login').then(res=>res.data).catch(err=>console.log(err));
  

В Auth0 URL-адрес хоста и порт не являются проблемой, вы можете использовать все, что захотите, главное — это /callback маршрут, в Auth0 вы можете настроить пользовательский маршрут для обратного вызова, но по умолчанию в вашем приложении у вас должен быть маршрут /callback . не забудьте добавить localhost: 3001 в конфигурации Auth0

Я надеюсь помочь.