下一个 js/react 无法设置 cookie答案

【问题标题】：Next js/react Unable to set a cookie下一个 js/react 无法设置 cookie
【发布时间】：2022-01-03 21:30:25
【问题描述】：

所以我试图在下一个 js 中获取一个 cookie 并使用 express，但后端可以与邮递员一起正常工作并获取 cookie 令牌，但问题是前端没有获取 cookie，这是我的后端：

const express = require("express");
const cookieParser = require("cookie-parser");
const cors = require("cors");

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());
app.use(cookieParser());

app.post("/", (req, res) => {
  res.cookie("token", req.body.token).send({ msg: "DONE" });
});

app.listen(5000, () => {
  console.log("running on http://localhost:5000");
});

这里是前端：

import styles from "../styles/Home.module.css";

export default function Home({ cookies }) {
  return (
    <div className={styles.container}>
      <h1>Cookies: {cookies}</h1>
      <button
        onClick={() => {
          fetch(`http://localhost:5000/`, {
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ token: "ACBD" }),
          });
        }}
      >
        Genrate Cookies
      </button>
    </div>
  );
}

它正在返回：

未处理的运行时错误 TypeError: 获取失败

这里是否有错误，我也尝试将其放入getServerSideProps()，但它仍然不起作用。

【问题讨论】：

在后端试试这个：app.use(cors({ origin: "http://localhost:CLIENT_PORT", credentials: true })); 和 credentials: "include", 到客户端的标题
我已经添加了您的建议，它确实修复了 TypeError: Failed to fetch 错误，但它仍然没有在 nextjs 中设置 cookie，但在邮递员中可以工作

标签： javascript reactjs express cookies next.js

【解决方案1】：

我使用 js-cookie。效果很好在前端的 React.useEffect 中获取和设置 Cookies

【讨论】：

不，我正在尝试从后端获取 cookie 我已经尝试过js-cookie ，它工作正常，但问题是它确实从后端设置了一个 cookie