无法从前端反应设置 cookie答案

【问题标题】：couldn't set cookie from frontend react无法从前端反应设置 cookie
【发布时间】：2022-01-03 09:10:25
【问题描述】：

我有一个后端节点服务器，它有两个 api：设置和获取 cookie。

设置和获取 cookie 的后端代码：

服务器：本地主机：4001

router.get("/addCartToCookie", function(req, res){
  let options = {
    maxAge: 1000 * 60 * 15,
    httpOnly: true,
  };

  let cartData = {
    name: req.body.name,
    slug: req.body.slug,
    productPictures: req.body.productPictures,
    price: req.body.price,
    description: req.body.description,
    quantity: req.body.quantity,
  };

  // Set cookie
  res.cookie("cartName", cartData, options); // options is optional
  res.send("Cart Added to Cookie");
});

//To get the cookie
router.get("/getCartFromCookie",function(req, res){
  res.send(req.cookies);
  console.log(req.cookies["cartName"]);
});

前端反应代码在按钮点击时调用 api：

客户端：本地主机：3001

  const addToCartCookie = () => {
    console.log("Calling add to cart cookie");
    axios
      .get("http://localhost:4001/api/addCartToCookie", {
        name: product.name,
        slug: product.slug,
        productPictures: product.productPictures[0].img,
        description: "sabdsjbfjsd",
        price: product.storePrice,
        quantity: itemCount,
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

OnClick调用上面的api，

      <Button
        type="primary"
        onClick={() => {
          addToCartCookie();
        }}
      >
        ADD TO CART
      </Button>

单击按钮时，它不会在客户端浏览器中设置 cookie。在检查网络选项卡时，API 调用正常，但唯一的问题是它没有将 cookie 设置到客户端。

【问题讨论】：

也许这会解决你的问题stackoverflow.com/questions/36824106/…
@joinplastic 尝试将 http 设置为 false 并将 withCredentials 设置为 true 并添加了标头，但仍然无法正常工作

标签： javascript node.js reactjs express cookies

【解决方案1】：

在前端，将 allow-credentials 标头设置为 true，在 api 上，将 Origin-Allow-Credentials 标头设置为 true，保存然后重新启动您的服务器。然后保存前端后，左键点击你网站上的浏览器重载图标，“点击硬重载并删除缓存”。然后重试。

【讨论】：