React客户端向Express服务器POST请求时req.cookies中token丢失问题

现象 #

• 登录接口正常设置token cookie，token已存入localStorage，但调用/places接口时，服务器控制台打印token为undefined
• 请求体数据完整，但因JWT验证失败（token不存在）导致服务器崩溃
• 登录、注册功能正常，MongoDB连接正常

相关代码 #

Express服务器/places接口 #

app.post('/places', (req, res) => {
    const {token} = req.cookies;
    const {title, address, addedPhotos, description, extraInfo, checkIn, checkOut, maxGuests} = req.body;
    console.log(token)
    jwt.verify(token, jwtSecret, {}, async (err, userData) => {
        if (err) throw err;
        const placeDoc = await Place.create({
            owner: userData.id,
            title, address, addedPhotos, description, extraInfo, checkIn, checkOut, maxGuests
        })
        res.json(placeDoc)
    });
})

Express登录接口 #

app.post('/login', async (req, res) => {
    const {email, password} = req.body;

    const userDoc = await User.findOne({email})

    if (userDoc) {
        const isPasswordSame = bcrypt.compareSync(password, userDoc.password)
        if (isPasswordSame) {
            jwt.sign({email: userDoc.email, id: userDoc._id, name: userDoc.name}, jwtSecret, {}, (err, token) => {
                if (err) throw err;
                res.cookie('token', token).json(userDoc)
            })
        } else {
            res.json('pass not ok')
        }
    } else {
        res.json('Not found ')
    }
})

React客户端提交函数 #

const addNewPlace = async (ev: FormEvent<HTMLFormElement>) => {
        ev.preventDefault()
        const placeData = {
            title,
            address,
            addedPhotos,
            description,
            perks,
            extraInfo,
            checkIn,
            checkOut,
            maxGuests,
        }
        await axios.post('/places', placeData)

        setRedirect('/account/places')
    }

问题原因及解决方法 #

1. axios请求未携带cookie
   默认情况下，axios跨域请求不会自动携带cookie，需配置withCredentials: true，修改客户端请求代码：

await axios.post('/places', placeData, { withCredentials: true })

2. 服务器端跨域配置缺失
   若客户端和服务器跨域运行（如客户端3000端口、服务器4000端口），需在Express中配置CORS允许携带凭证：

const cors = require('cors');
app.use(cors({
    credentials: true,
    origin: 'http://localhost:3000' // 替换为你的React客户端实际域名/端口
}));

3. 服务器未正确解析cookie
   确保服务器已使用cookie-parser中间件，否则无法读取req.cookies：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

4. 优化错误处理避免服务器崩溃
   当前代码中throw err会直接导致服务器崩溃，改为返回错误响应：

jwt.verify(token, jwtSecret, {}, async (err, userData) => {
    if (err) return res.status(401).json('无效或缺失token');
    // 后续创建Place的代码
})

内容的提问来源于stack exchange，提问作者Mateusz Cwojdzinski