从节点发送 cookie

Question

大家早上好。 我正在尝试使用 MERN 堆栈创建身份验证系统。 现在在我的控制器中，我有这个登录功能：

 export const login = async (req, res) => {
  try {
    const { email, password } = req.body;
    const user = await Users.findOne({ email });
    if (!user)
      return res.status(400).json({ msg: "This email does not exist." });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch)
      return res.status(400).json({ msg: "Password is incorrect." });

    const refresh_token = createRefreshToken({ id: user._id });

    res.cookie("refreshtoken", refresh_token, {
      httpOnly: true,
      path: "/api/user/refresh_token",
      maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
    });

    res.json({ msg: "Login success!" });
  } catch (err) {
    return res.status(500).json({ msg: err.message });
  }
};

这是获取访问令牌的函数

export const getAccessToken = (req, res) => {
  try {
    const rf_token = req.cookies.refreshtoken;
    console.log("REQ COOKIE ==> ", req.cookies.refreshtoken);
    if (!rf_token) return res.status(400).json({ msg: "Please login now!1" });

    jwt.verify(rf_token, process.env.REFRESH_TOKEN_SECRET, (err, user) => {
      if (err) return res.status(400).json({ msg: "Please login now!2" });

      const access_token = createAccessToken({ id: user.id });
      res.json({ access_token });
    });
  } catch (err) {
    return res.status(500).json({ msg: err.message });
  }
};

作为邮递员进行测试，我没有错误。 我用这个端点登录

`http://localhost: 5000/api/user/login` 

cookie 发送正确，之后我调用

http://localhost:5000/api/user/refresh_token

令牌归还给我。

通过从浏览器执行测试，它没有通过，并且 req.Cookie 始终未定义。 这是我的反应应用程序中的代码

const dispatch = useDispatch();
  const token = useSelector((state) => state.token);
  const auth = useSelector((state) => state.auth);
  const test = Cookies.get("refreshtoken");

  useEffect(() => {
    const firstLogin = localStorage.getItem("firstlogin");
    console.log(firstLogin);
    // if (firstLogin) console.log(test);

    if (firstLogin) {
      console.log("i'm here");
      const getToken = async () => {
        try {
          const res = await axios.post(
            "http://localhost:5000/api/user/refresh_token",
            null
          );
          console.log(res);
        } catch (error) {
          console.log(error);
        }
      };
      getToken();
    }
  }, [auth.isLogged]);

我哪里错了？在此先感谢大家

最后这是我的 server.js

import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";
import postRoutes from "./routes/posts.route.js";
import userRoutes from "./routes/users.route.js";

const app = express();
dotenv.config();

app.use(express.json({ limit: "30mb", extended: true }));
app.use(express.urlencoded({ limit: "30mb", extended: true }));

app.use(cors());
app.use(cookieParser());

app.use("/api/posts", postRoutes);
app.use("/api/user", userRoutes);

app.get("/", (req, res) => {
  res.send("Hello to memories API");
});

const PORT = process.env.PORT || 5000;

mongoose
  .connect(process.env.CONNECTION_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() =>
    app.listen(PORT, () => console.log(`Server Running on port ${PORT}`))
  )
  .catch((err) => console.log(err.message));

Answer 1

有关信息，我在这里写下引导我实现目标的解决方案

后端 index.js

app.use(
  cors({
    origin: `${process.env.CLIENT_URL}`,
    credentials: true,
  })
);

端点登录

res.cookie("refreshtoken", refresh_token, {
      httpOnly: true,
      sameSite: "none",
      secure: true,
      path: "/api/users/refresh_token",
      maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
    });

前端

axios.defaults.withCredentials = true;
export const getToken = () => API.post("/users/refresh_token", null);

感谢@Danry 的帮助。

Answer 2

我前段时间遇到过这个问题。我假设您的服务器和应用程序不在同一个来源。您需要在两端适当地设置 CORS 才能正常工作；在express 和axios 上。

这已经回答here。