NodeJS 无法在MERN Stack联机模式下将Cookie从服务器存储到客户端

oyjwcjzk  于 2023-08-04  发布在  Node.js
关注(0)|答案(1)|浏览(88)

当应用程序在线部署时,我不能存储来自express服务器的cookie来响应前端,但它在localhost中工作得很好。服务器用cookie响应,但客户端不保存它,这是什么问题?我正在为服务器使用cookieParser中间件

客户端请求(React)

const handleLogin = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const url = '/login';
      const response = await axios.post(
        url,
        {
          email: email,
          password: password,
        },
        {
          withCredentials: true,
        }
      );

      axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.payload}`;

      setHidden(true);
      navigate('/');
    } catch (error) {
      setLoading(false);
      setHidden(false);
      setErrorMsg(error.message);
    }
  };

字符串

服务器请求处理器(Express)

export const Login = async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await User.findOne({ email: email });
    if (!user) {
      return response(400, {}, 'Email or password does not match!', res);
    }

    const matchUser = await bcrypt.compare(password, user.password);
    if (!matchUser) {
      return response(400, {}, 'Email or password does not match!', res);
    }

    const ACCESS_TOKEN = accessToken(email);
    const REFRESH_TOKEN = refreshToken(email);

    const addToken = new RefreshToken({
      token: REFRESH_TOKEN,
    });

    await addToken
      .save()
      .then(() => {
        res.cookie('ref_token', REFRESH_TOKEN, {
          sameSite: 'none',
          secure: true,
          maxAge: 7 * 24 * 60 * 60 * 1000,
        });
        response(201, ACCESS_TOKEN, 'Login success!', res);
      })
      .catch((error) => res.send(error));
  } catch (error) {
    console.log(error);
  }
};

服务器设置(Express)

import express from 'express';
import cors from 'cors';
import cookieParser from 'cookie-parser';
import './connection/database.js';
import routes from './routes/routes.js';

const app = express();
const port = 5000;

app.use(cors({ credentials: true, origin: ['https://kutu-buku-apps.vercel.app', 'http://localhost:3000'] }));

app.use(express.json());
app.use(cookieParser());
app.use(routes);

app.listen(port, () => {
  console.log(`Server is up and running at http://localhost:${port}`);
});

export default app;


我已经尝试了很多事情,如改变cookie属性设置,但仍然不会工作,只能在localhost工作。它应该像离线一样正常工作。

hjzp0vay

hjzp0vay1#

如果您的cookie在本地主机上工作正常,但在在线部署时却无法正常工作,则此问题有几个潜在原因。让我们探讨一些常见原因和故障排除步骤:
域不匹配:在线部署应用程序时,前端和后端的域可能不匹配。Cookie受同源策略的约束,这意味着它们只能由同一个域设置和读取。确保前端和后端托管在同一个域上,或者如果它们位于不同的子域上,请适当地设置cookie域。
安全属性:如果您的后端通过HTTPS提供服务,但您的前端不是,则某些浏览器可能由于安全原因而不存储cookie。具有“安全”属性的Cookie只能通过安全连接(HTTPS)设置。确保您的前端也通过HTTPS提供服务。
路径属性:检查您在设置cookie时是否指定了正确的“path”属性。如果路径过于严格,则可能无法从您的前端当前位置访问Cookie。将cookie路径设置为“/”应该可以在整个域中访问它。HttpOnly属性:如果您在服务器端设置了带有HttpOnly属性的cookie,则无法从客户端JavaScript访问它。此属性用于增加安全性以防止跨站点脚本(XSS)攻击。
SameSite属性:某些浏览器可能不会存储缺少或无效的“SameSite”属性的Cookie。此属性用于控制何时将cookie发送到服务器。常用值为“Lax”或“Strict”。确保为您的用例设置了适当的值。
第三方Cookie拦截:某些浏览器可能会在默认情况下阻止第三方Cookie。如果您的前端和后端托管在不同的域上,请考虑使用CORS(跨域资源共享)来处理跨域请求。
服务器配置:检查您的服务器配置,确保它没有明确阻止设置Cookie。例如,某些安全中间件可能会干扰cookie设置。客户端代码:仔细检查您的React前端代码,以确保您不会无意中覆盖或清除cookie。为了有效地解决问题,您可以使用浏览器开发人员工具来检查网络请求,并查看是否从服务器发送了“Set-Cookie”标头以及是否保存了Cookie。此外,请检查控制台是否有与Cookie相关的任何错误消息。
如果您提供有关后端(Express)和前端(React)代码以及如何设置cookie的更多具体细节,我可以帮助您进一步诊断问题。

相关问题