前端发起加购POST请求req.session异常导致商品数量始终为1如何修复

故障根因 #

有两个核心问题导致前后端调用表现不一致：

• 前端axios默认不会发送请求凭证（cookie），导致每次前端发起的请求都被后端识别为新会话，session每次都重置，所以加购数量永远是1。Postman默认会自动存储和携带会话cookie，所以调用完全正常，你的session使用本身没问题，是前端请求配置问题导致的session失效。
• Cart构造函数逻辑存在缺陷，当前的实现仅支持存储单个商品，后续加购不同商品会直接覆盖原有商品，无法实现购物车多商品存储的需求。

修复方案 #

1. 修复前端请求与后端跨域配置 #

首先在你的cartService对应的axios实例初始化位置，添加凭证携带配置：

const cartService = axios.create({
  baseURL: '你的后端接口根地址',
  withCredentials: true // 关键配置，允许请求自动携带session cookie
})

同时需要同步修改后端的CORS配置，允许接收前端凭证：

app.use(cors({
  origin: '你的前端服务地址', // 不能使用通配符*，必须填写具体的前端域名
  credentials: true
}))

2. 修复Cart构造函数逻辑 #

修改实现逻辑，按商品ID区分存储不同商品，支持同商品数量累加：

module.exports = function Cart(oldCart) {
  this.productItems = oldCart.productItems || {};
  this.totalQty = oldCart.totalQty || 0;
  this.totalPrice = oldCart.totalPrice || 0.00;

  this.addProduct = function(item) {
    const itemId = item._id;
    let storedItem = this.productItems[itemId];
    // 该商品从未加购过，初始化条目
    if (!storedItem) {
      storedItem = this.productItems[itemId] = {item: item, qty: 1, price: item.price};
      this.totalQty += 1;
      this.totalPrice += item.price;
    } else {
      // 已有该商品，数量累加
      storedItem.qty++;
      storedItem.price = storedItem.item.price * storedItem.qty;
      this.totalQty++;
      this.totalPrice += storedItem.item.price;
    }
  }
}

3. 优化后端接口逻辑顺序 #

调整session存储的时机，避免空数据提前写入session：

app.post("/add-to-cart/:id", async (req, res) => {
  try {
      const id = req.params.id;
      
      const { data }  = await axios.get("http://localhost:4200/products");
      const singleProduct = data.find((product) => product._id === id);
      if (!singleProduct) return res.status(404).send('商品不存在');

      let cart;
      if (!req.session.cart) {
        cart = new Cart({});
      } else {
        cart = new Cart(req.session.cart);
      }
      // 先完成加购操作再写入session
      cart.addProduct(singleProduct);
      req.session.cart = cart;
      console.log(req.session.cart)
      res.send(cart);
    
  } catch (error) {
    console.log(error);
    res.status(500).send('加购失败');
  }
});

内容的提问来源于stack exchange，提问作者Jan Tuđan