COOKIE 未在我的浏览器中设置,但在我的响应标头中获取它

问题描述 投票:0回答:0

我正在尝试使用我的 express js 服务器中的 cookie-parser 向我的客户浏览器发送 cookie,我可以在中看到 cookie 我的响应标头中的 set-cookie 但未在浏览器中设置 cookie。我试着用谷歌搜索这个问题 并了解到它与 CORS 错误有关,所以我在前端和后端设置了我的代码,如下所示来解决 问题,但 cookie 仍未在浏览器上设置。我的前端托管在 netlify 上,而后端是 托管在渲染器上。如果有人可以帮助我解决这个问题,我会很感激。

前端请求:

const login = async (inputs) => {
    try {
      const { data } = await axios({
        headers: {
          "Access-Control-Allow-Origin":
            "url-to-my-backend-server-hosted-on-render",
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        url: `url-to-my-backend-server-hosted-on-render/api/v1/auth/login`,
        data: inputs,
        method: "POST",
      });
      setCurrentUser(data);
      if (data === null || data.msg) setErr(data);
    } catch (error) {
      setErr(error.response.data.msg);
    }
  };

我的后端服务器代码: 索引.js

const morgan = require("morgan");
const express = require("express");
const cookieParser = require("cookie-parser");
const path = require("path");
const rateLimit = require("express-rate-limit");
const cors = require("cors");
const app = express();
const dotenv = require("dotenv");
const multer = require("multer");
const auths = require("./routes/auth");
const port = process.env.PORT || 3001;
dotenv.config();
let dir = path.join(\_\_dirname, "uploads");

app.use(morgan("dev"));
app.use(cors());
app.use((req, res, next) => {
res.setHeader(
"Access-Control-Allow-Origin",
"url-to-my-client-hosted-on-netlify.app"
);
res.setHeader("Access-Control-Allow-Credentials", "true");
next();
});
app.use(cookieParser(process.env.JWT));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(dir));

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + file.originalname);
  },
});
const upload = multer({ storage });

app.post("/api/v1/upload", upload.single("file"), function (req, res) {
  const file = req.file;
  res.status(200).json(file.filename);
});

app.use("/api/v1/auth", auths);

app.all("*", (req, res) => {
  res.status(404).json("routh not found, please use /api/v1/posts");
});

app.listen(port, () => {
  console.log(`server is running on ${port}`);
});

控制器/login.js:

const login = async (req, res, next) => {
  const q = 'query'
  try {
    const isUser = await pool.query(q, [req.body.username]);
    if (!isUser.rows[0]) return res.status(404).json({ msg: "usernot found" });
    if (req.body.username === undefined || req.body.password === undefined) {
      return res
        .status(400)
        .json({ msg: "please fill out the fileds in other to login" });
    }

    // COMPARE PASSWORD
    const cPassword = await bcrypt.compare(
      req.body.password,
      isUser.rows[0].password
    );
    if (!cPassword) {
      return res.status(400).json({ msg: "incorrect username or password" });
    }
    const token = jwt.sign({ id: isUser.rows[0].userid }, process.env.JWT, {
      expiresIn: "24h",
    });
    const { password, ...others } = isUser.rows[0];

    res
      .cookie("access_token", token, { httpOnly: true })
      .status(200)
      .json({ ...others });

    next();
  } catch (error) {
    next(createError(401, "invalid cridentials", error.stack));
  }
};
express cookies jwt setcookie express-jwt
© www.soinside.com 2019 - 2024. All rights reserved.