尝试从客户端发送数据但 req.session 无法正常工作答案

【问题标题】：Trying to send data from client side but req.session doesn't work properly尝试从客户端发送数据但 req.session 无法正常工作
【发布时间】：2021-10-30 12:39:43
【问题描述】：

我正在尝试发布请求，当我与邮递员一起执行时非常成功，但我试图从我的客户端发送它。我想发布购物车，但结果我不断发布数量为 1 的项目，无论我发布该请求多少次。解决此问题并以正常方式发布请求的最佳解决方案是什么？

我正在使用会话，也许这会导致从前端发送请求的问题？

这是我的发帖请求：

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 = await data.find((product) => product._id === id);

    let cart;
    if (!req.session.cart) {
      req.session.cart = cart = new Cart({});
    } else {
      
      cart = new Cart(req.session.cart);
    }
    req.session.cart = cart;
    cart.addProduct(singleProduct);
    console.log(req.session.cart)
    res.send(cart);
    
  } catch (error) {
    console.log(error);
  }
});

这是Cart 代码：

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

  this.addProduct = function(item) {
    let storedItem = this.productItems;
    if (!storedItem.hasOwnProperty("item")) {
      storedItem = this.productItems = {item: item, qty: 1, price: item.price};
      this.totalQty = 1;
      this.totalPrice = item.price;
    } else {
      storedItem = {item: item, qty: storedItem.qty, price: storedItem.price};
      console.log("STORED ITEM: ", storedItem);
      this.productItems = storedItem;
      storedItem.qty++;
      storedItem.price = storedItem.item.price * storedItem.qty;
      this.totalQty++;
      this.totalPrice += storedItem.item.price;
    }
  }
}

这是我用@click.prevent="addToCart()"放在按钮上的功能

addToCart(){
      let productId = this.oneProduct.id;
      Cart.postCart(productId);
    }

我从前端的 axios 服务发送这个：

postCart(productId){
        return cartService.post(`/add-to-cart/${productId}`);
    }

当我尝试在客户端与之交互时，没有警告或错误。这是我在后端得到的输出（不断重复单个产品的信息，但这在客户端正常工作）：

【问题讨论】：

您能否将您当前的Cart 代码也放入问题中？
当然，我现在在我的问题中更新了它。
@theusaf 你知道如何解决这个问题吗？
很难解决这个问题，因为没有任何关于当前输出和预期输出的示例
很抱歉，当我尝试与前端的数据交互时，我更新了console.log 的输出图像，一切都很干净，但服务器端始终显示相同的数量和价格，表现得好像会话不存在。我的预期输出是控制台中的正常行为，数量增加 1，就像我只是用邮递员测试它（只是在服务器端）。因为目前我没有输出任何东西，因为数据没有正确旋转。

标签： javascript express client

【解决方案1】：

如果您使用的是 angular、vue、react 或任何支持路由的前端框架。您无需使用res.redirect 更改路线并获取数据。

您如何使用res.send(cart) 返回购物车数据并在前端进行重新路由。

async postCart(productId){
    cartService.post(`/add-to-cart/${productId}`);
    // history.push('/your-next-route')
}

【讨论】：

这看起来不错，但我仍然从前端获得 1 的数量。
我只是传递了那个 id，但仍然不知道为什么我没有从前端正确发布数据，我的 console.log 正在显示，但它显示了相同的数据，应该是我动态的，因为我在 req.session 中堆叠数据

【解决方案2】：

好像你的 seesionId 没有发送到后端，你使用的是 fetch 还是 axios？

获取：

fetch('https://example.com', {
  credentials: 'include'
})

axios：

{withCredentials: true}

也许服务器和客户端是跨域的？设置相同站点的适当值，请参见： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

【讨论】：

【解决方案3】：

我认为这行有问题：

req.session.cart = cart = new Cart({});

此处解释了此分配未按预期工作的原因：Multiple left-hand assignment with JavaScript

你应该把它改成：

cart = new Cart({});

其余的逻辑应该可以工作。

【讨论】：