NodeJS注销接口及React前端调用报错：无法读取undefined的session属性

错误信息翻译 #

未捕获（在 promise 中）类型错误：无法读取未定义的属性（读取 'session'）

服务器端问题与修复 #

你的Node.js接口存在两个核心问题：

1. req.session.destroy()是异步方法，直接在它之后调用res.send会导致还没完成session销毁就返回响应，且销毁后req.session会变为undefined。
2. Express中res.send()会自动结束响应，无需额外调用res.end()，重复调用可能引发异常。

修复后的服务器代码：

router.delete('/logout', (req,res) => {
    console.log('销毁前的session:', req.session);
    req.session.destroy((err) => {
        if (err) {
            return res.status(500).send({ message: '注销失败', error: err });
        }
        res.send({ message: '注销成功', session: req.session });
        console.log('销毁后的session:', req.session);
    });
});

前端问题与修复 #

React端的错误是因为fetch返回的response对象没有data属性，需要先调用异步的.json()方法解析响应体。另外如果存在跨域场景，需要添加credentials: 'include'来携带session对应的cookie。

修复后的前端代码：

const LogoutSession = async(e) =>{
    e.preventDefault();
    try {
        const response = await fetch(`http://localhost:3001/logout`, {
            method:"DELETE",
            credentials: 'include'
        });
        const data = await response.json();
        console.log(data.session);
        console.log(data.message);
    } catch (err) {
        console.error('注销请求出错:', err);
    }
}

额外注意事项 #

如果前端和服务器存在跨域，需要在服务器端配置CORS时开启credentials: true，并指定允许的origin（不能用*），示例：

const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:3000', // 你的前端地址
    credentials: true
}));

内容的提问来源于stack exchange，提问作者Tarek Gharbi