无法在 React 和 express 之间设置 cookie

Question

我正在尝试在我的 React 前端（在 netlify 上）和我的 express 后端（在 heroku 上）之间设置一个 cookie。我的代码在本地主机上运行得很好，但在生产环境中却不行。在生产中，我收到 500 服务器错误，并且未在前端设置 cookie。（如果我删除在后端设置 cookie 的代码，代码将按预期工作）。

我知道这个问题已经得到解答，但我仍然找不到解决方案。

如有任何帮助，我们将不胜感激。

这是我试过的一些链接

我的代码：

Index.ts（快递）

import express from "express";
import routes from "./routes";
import connectToDb from "./utils/connectToDb.util";
import dotenv from "dotenv";
import apiError from "./middlewares/apiError.middleware";
import cookieParser from "cookie-parser";
import deserializeUser from "./middlewares/deserializeUser";
import cors from "cors";
import session from "cookie-session";

dotenv.config();
const app = express();
const PORT = process.env.PORT || 5000;

app.use(
  cors({ origin: true, credentials: true, exposedHeaders: ["set-cookie"] })
);
app.use(express.json());
app.use(cookieParser());
app.use(deserializeUser);

app.enable("trust proxy");
app.set("trust proxy", 1);
app.use(
  session({
    secret: "dede",
    sameSite: "none",
    maxAge: 1000 * 60 * 60 * 24 * 7,
    secure: false,
  })
);

app.use(routes);
app.use(apiError);

app.listen(PORT, () => {
  console.log(`Server started on ${PORT}`);

  connectToDb();
});

登录控制器（快速）

export const login = async (
  req: Request<{}, {}, UserLoginInput>,
  res: Response,
  next: NextFunction
) => {
  try {
    const user = await findUserByEmail(req.body.email);

    if (!user) {
      return next(UserError.invalidInputError("email"));
    }

    const isPasswordValid = await user.validatePassword(req.body.password);

    if (!isPasswordValid) {
      return next(UserError.invalidInputError("password"));
    }

    const jwt_token = createToken(user._id);

    res.cookie("jwt_token", jwt_token, {
      maxAge: 1000 * 60 * 60 * 24 * 7,
      httpOnly: true,
      domain: "https://website.com",
      sameSite: "none",
    });

    res.status(200).json({ user });
  } catch (error) {
    console.log("ERROR in login", error);
    res.status(500).send(error);
  }
};

Api 调用 (React)

import axios from "axios";

const API_URL = process.env.REACT_APP_BACKEND_URL || "http://localhost:5000";

const api = axios.create({
  baseURL: API_URL + "/api/users",
  withCredentials: true,
});

export const login = async (email: string, password: string) => {
  const response = await api.post("/login", { email, password });

  console.log(response);

  return response.data;
};

Answer 1

我最近遇到了同样的问题，我可以清楚地看到响应中的 cookie，但不知何故它没有出现在浏览器商店中。我也尝试了你上面提到的 links，试图设置 sameSite、secure 和 domain 属性等。 None 其中的工作在我的情况。但最后我在 Heroku 上的相同 url 下部署了我的前端应用程序和后端应用程序，这是我在 youtube 上找到的视频，link 在这里：https://www.youtube.com/watch?v=5dQC2JUd27g，希望它能解决你的问题。

无法在 React 和 express 之间设置 cookie

Unable to set cookie between React and express

cookies

heroku

session-cookies

reactjs

netlify