req.user (Passport.js) 未定义，不知道问题出在哪里

Question

背景：

我是 webdev 初学者。 这是一个带有 Passport.js 用于身份验证的 MERN 应用程序。 在本地环境中，它可以完美运行。 但是，当我将前端部署到 Vercel 并将后端部署到 Heroku 时，身份验证不起作用。 请注意，前端和后端的域是不同的。 这是 url： https://petexchangehk-frontend.vercel.app/ 。 它是用中文写的，但您仍然可以通过找到右上角的蓝色按钮来测试身份验证。 前端代码在这里：https://github.com/Coding-noob-helpMePlz/petexchangehk_frontend后端代码在这里： https://github.com/Coding-noob-helpMePlz/petexchangehk.back

问题的简短描述：

在本地环境中，req.user 拥有所有相关信息。 在部署中， req.user 变为undefined ，这使得身份验证不起作用。

问题的详细描述（代码如下）：

期望的正常行为是每当加载网页时，客户端都会向服务器发送请求（如果用户登录了passport-google-oauth20，则有cookies），因此express-session和passport.js使用cookie来识别用户，并创建了 req.user。 然后服务器提取req.user中的信息查询数据库获取更多信息，并将信息发送回客户端，客户端将相关信息显示在网页上。 这适用于本地环境。

但是，在部署环境中，每当加载网页并且客户端向服务器发送请求时，req.user 就会变为未定义。

##前端代码（反应）：

fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/login/success`||'/auth/login/success', {
                method: 'GET',
                credentials: 'include',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Credentials': true,
                },
            })
                .then(async (response) => { //I need to
                    if (response.status === 200 || response.status === 204) {
                        return response.json();
                    }
                    throw new Error('authentication has been failed');
                })
                .then(async (user) => {
                    if (user.success === false) {

                        console.log('the server said no user')
                        return
                    }
                    console.log('user from App.jsx', user)
                    setUser(user);
                    if(!user.nickname){
                    navigate('/createnickname')
                    }
                })
                .catch((err) => {
                    console.log('ERROR!!', err);
                })
                ;
        };

##strong textBackend 代码（节点）：##

router.get('/login/success',  async (req, res) => {

    if (req.user) {
        let user = await Users.find({ userId: req.user.id }).then(async (user) => {
            console.log('see if user param is passed', user);
            if (user.length !== 0) {
                console.log('this user has userId, he already registed!!');
            } else {
                console.log('this use is new... building new userId...');
                await Users.create({ userId: req.user.id });
            }
            // console.log('USER_NICK', user.[].nickname);
            res.status(200).json({
                success: true,
                thirdPartyUser: req.user,
                nickname: user[0].nickname,
                contact: user[0].contact,
                cookies: req.cookies,
            });

        });
    }
    if (!req.user) {
            console.log('req.user is uedefined....')
        res.json({
            success:false
        })
    }
});

我对这个问题的原因的猜测：

本地环境和部署之间的一个区别是本地环境使用相同的域，而在部署中我为前端和后端使用不同的域。 因此涉及到 CORS，因为身份验证需要使用 cookies，并且由于需要额外的配置，CORS 和 cookie 的组合变得很麻烦。 似乎服务器没有从客户端收到相关的身份验证cookie，这导致ExpressJS的req.user未定义。 我想知道是不是因为某些配置。 但是，这只是我的猜测，我不确定。

我尝试过的事情：

1. 确保我的 Chrome 没有阻止 cookies 的扩展程序。

2. 按登录后，检查是否存储了新的cookie，它是。

3. 检查 Passport.js 中是否发生了序列化和反序列化用户。 当我登录时，护照序列化用户，但是，当客户端发出请求时（我假设它也发送存储的 cookie）。 服务器不反序列化任何东西。

passport.serializeUser((user, done) => {
    console.log(`serialize: user:${user}`)
    done(null, user);
});

passport.deserializeUser((user, done) => {
    console.log(`deserialize user:${user}`)
    done(null, user);
});

3. 在后端，通过使用“cors”库，我将 Access-Control-Allow-Origin 设置为前端的 URL。 此外，Access-Control-Allow-Credentials 为 true。 请参阅下面的代码：

app.use(
    cors({
        origin: process.env.FRONTEND_URL,
        credentials: true,
    })
);

4. 在后端，使用 express-session，我将 cookie 配置为：

const sessionConfig = {
    secret: 'thisshouldbeabettersecret!',
    resave: false,
    saveUninitialized: false,
    cookie: {
        expires: Date.now() + 1000 * 60 * 60 * 24 * 7,
        maxAge: 1000 * 60 * 60 * 24 * 7,
        domain: process.env.SERVER_URL,
        sameSite: 'strict'
        // secure:true
    },
};
app.use(session(sessionConfig));

5. 在前端的获取请求中（上面提到的行为是每当加载网站时，客户端都会向服务器发送请求），我有凭据：true

fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/login/success`||'/auth/login/success', {
                method: 'GET',
                credentials: 'include',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Credentials': true,
                },
            })
                .then(async (response) => { //I need to
                    if (response.status === 200 || response.status === 204) {
                        return response.json();
                    }
                    throw new Error('authentication has been failed');
                })
                .then(async (user) => {
                    if (user.success === false) {

                        console.log('the server said no user')
                        return
                    }
                    console.log('user from App.jsx', user)
                    setUser(user);
                    if(!user.nickname){
                    navigate('/createnickname')
                    }
                })
                .catch((err) => {
                    console.log('ERROR!!', err);
                })
                ;
        };

6. 将 Vercel 配置中的重写规则添加到 map 您的服务器端点到前端的子路径，正如我如何使用 Vercel 设置代理建议的那样，但是问题仍然存在。