Question

我希望我的问题不会这么愚蠢。我在前端有很多经验，但在后端却很少。

我有一个React应用程序，该应用程序在后端使用Node.js和Express。我在"proxy": "http://localhost:3001"中声明了package.json，但这并不是100％的工作，但是我知道它正在帮助连接服务器（该服务器在端口3001上运行）。

我在后端设置Auth0验证用户时遇到的问题。我注意到的第一件事是我无法对http://localhost:3001/login运行get请求，而是不得不将用户导航到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 / callback the callback endpoint is routing me to localhost：3001 / users”。

我可以看到发生了什么。当我使用3001进入网址时，我碰到了端点。当我使用3000访问URL时，我正在查看前端页面。我只是不明白为什么Auth0文档会告诉我使用前端端口进行回调？

Answer 1

我会尽力帮助，但我不确定这是否是答案。

如果您在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和端口不是问题，U可以使用任何您想要的U，指向/callback路由，在Auth0中，您可以为回调配置自定义路由，但是默认情况下在您的应用中，您需要有一条路线/callback。记得将localhost：3001添加到Auth0配置中

希望对您有所帮助。

服务器端路由与带代理的前端路由

1 个答案: