当应用程序在线部署时,我不能存储来自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工作。它应该像离线一样正常工作。
1条答案
按热度按时间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的更多具体细节,我可以帮助您进一步诊断问题。