Set-Cookie 未在 HTTP 响应标头上发送

Question

我正在使用 React 和 Express 创建一个身份验证页面。 我也在使用智威汤逊。

我在后面做了这条路线：

服务器.js

...
app.use(
  cookieSession({
    name: "prode_session",
    secret: "MIOURI_PRODE_SECRET", //add to .env variable
    httpOnly: false,
  })
);
app.use(cors());
...

auth.routes.js

app.post("/signin", controller.signin);
user.routes.js

app.get(
    "/user",
    [authJwt.verifyToken],
    (req, res) => res.send(true)
  )

auth.controller.js

exports.signin = async (req, res) => {
  const user = await Users.findOne({
    where: { email: req.body.email },
  });

  try {
    if (!user) {
      return res.status(404).send({ message: "User Not found." });
    }

    const passwordIsValid = bcrypt.compareSync(
      req.body.password,
      user.password
    );

    if (!passwordIsValid) {
      return res.status(401).send({
        message: "Invalid Password!",
      });
    }

    const token = jwt.sign({ id: user.id }, config.secret, {
      expiresIn: 84000, //24hours
    });

    req.session.token = token;
    console.log(req.session);

    return res.status(200).send({
      isLogged: true,
      id: user.id,
      email: user.email,
      suscripcion: user.suscripcion,
      preference_id: user.preference_id,
      token,
    });
  } catch (error) {
    console.log(error);
  }
};

authJWT.js

verifyToken = async (req, res, next) => {
  let token = req.session.token;
  console.log(`THIS IS THE TOKEN: ${token}`);
  if (!token) {
    return res.status(403).send({
      message: "No token provided",
    });
  }
  jwt.verify(token, config.secret, (err, decoded) => {
    if (err) {
      console.log(err);
      return res.status(401).send({
        message: "Unauthorized!",
      });
    }
    req.id = decoded.id;

    next();
  });
};

const authJwt = { verifyToken };

module.exports = authJwt;

当我用 POSTMAN 测试它时，它可以正常工作，我的意思是，如果我首先尝试发出 GET 请求，响应是“没有提供令牌”，但如果我先登录，生成令牌然后发出 GET 请求，我变得真实。

问题是当我尝试在前面实现它时。

我在 React 中有这个 Login 组件，我在其中使用凭据发出 POST 请求：

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch("http://localhost:3000/signin", {
        method: "POST",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });
      const data = await response.json();
      console.log(data);

      if (data.isLogged && data.suscripcion === true && data.token) {
        
              await tokenAvailable()
        //navigate(`/masthead/${email}&${data.isLogged}&${data.id}`);
      } else if (data.isLogged && data.suscripcion === false) {
        navigate("/suscripcion", {
          state: { preference_id: data.preference_id },
        });
      } else {
        window.alert("Invalid Login");
      }
    } catch (error) {
      console.log(error);
    }
  };

async function tokenAvailable() {
    const user = await fetch("http://localhost:3000/user", {
      method: "GET",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
      },
    });

    const response = await user.json();
    setUser(await response);
    console.log(await response);
    return response;
  }

当我进行 POST 时，在收到响应后执行 GET 请求（tokenAvailable 函数），但是我收到“没有提供令牌”，而我希望像在 Postman 中一样收到“真”。

根据我的调试，authJWT.js 文件没有从 req.session.token 接收任何内容。 当我比较邮递员和浏览器的标题时，在 postan 中出现了 SET-cookie 键，但在浏览器中没有。

邮差：

浏览器：

我需要一些帮助。 我已经为此苦苦挣扎了将近 3 天。

Answer 1

我找到了解决方案。 显然，如果 React 应用程序和后端服务器托管在同一域中，则HttpOnly Cookie 方法有效。 所以本地开发需要使用http-proxy-middleware 。

我尝试安装 http-proxy-middleware 但出现了很多错误，所以我决定将 de JWT 存储在本地存储中。