服務器端路由與帶代理的前端路由

Question

我希望我的問題不會變得愚蠢。 我在前端有相當多的經驗，但在后端卻很少。

我有一個 React 應用程序，它在后端使用 Node.js 和 Express。 我已經在我的package.json中聲明了"proxy": "http://localhost:3001" ，我不是 100% 這樣做的，但我知道它有助於連接我的服務器（在端口 3001 上運行）。

我在后端設置 Auth0 以驗證用戶時遇到的問題。 我注意到的第一件事是我無法運行對http://localhost:3001/login的獲取請求，而是我不得不將用戶導航到 url http://localhost:3001/login . 我不確定為什么會這樣，但我認為它與 Auth0 設置有關。

在我登錄 Auth0 后，用戶會返回一個回調 url。 Auth0 的文檔建議使用localhost:3000/callback ，因為文檔在/callback也有一個后端端點。 但是，在登錄后，用戶只會被路由到http://localhost:3000/callback的空白頁面，並且永遠不會命中后端端點。 我發現這很奇怪，因為我基本上是從 Auth0 指南復制和粘貼到使用 Express 設置登錄。

無論如何，我發現如果我在http://localhost:3001/callback處將回調 url 更改為我的服務器，那么服務器端代碼將運行。 除了 Auth0 文檔說要使用端口 3000 之外，這是有道理的。似乎我的代理應該以某種方式鏈接這些。

回調端點 function 如下所示：

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 go 到 url 時，我達到了我的端點。 當我使用 3000 go 到 url 時，我正在查看我的前端頁面。 我只是不明白為什么 Auth0 文檔會告訴我使用我的前端端口進行回調？

Answer 1

我會盡力提供幫助，但我不確定這是不是答案。

如果您在 package.json 中將代理設置為"proxy": "http://localhost:3001" ，然后在您的應用程序中發出請求，您不需要使用完整的 ZE6B391A8D2C4D455703DZB,8

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 配置中

我希望能有所幫助。