Express后端设置的Cookie在Next.js中不生效该如何解决？

问题核心原因 #

跨域请求时前端未开启凭证携带，且后端Cookie配置缺少适配现代浏览器的必要属性，导致浏览器拒绝存储和后续请求携带Cookie。

分步解决方案 #

1. 修改Next.js的Axios请求，开启凭证携带 #

跨域场景下必须显式开启withCredentials: true，浏览器才会接收并在后续请求中自动携带Cookie：

const handleClick = async()=>{
    try {
        dispatch({type: actionEnum.ISLOADING_START});

        const userData = {
            username: logDetails.username,
            password: logDetails.password,
        }
        // 关键：添加凭证携带配置
        const response = await axios.post<axiosLogResAttributes>(`${BASE_URL}/login`, userData, {
            withCredentials: true
        });
        
        // 注意：httpOnly Cookie无需存在localStorage，这会失去其XSS防护优势
        localStorage.setItem('token', response?.data.userToken)
        dispatch({type: actionEnum.SET_USER_REFRESH, payload: response?.data.userRefreshToken});
        
        dispatch({type: actionEnum.ISLOADING_END})
        router.push('/')
        
    } catch (error) {
        dispatch({type: actionEnum.ISLOADING_END}) 
    }
};

2. 完善后端Cookie配置 #

适配现代浏览器的跨域Cookie规则，补充sameSite与secure属性：

res.cookie("refreshJWT", userRefreshToken, {
    httpOnly: true,
    maxAge: 604800000,
    // 生产环境需配合HTTPS设置为none+secure，开发环境用lax即可
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    secure: process.env.NODE_ENV === 'production'
});

3. 确认CORS配置的兼容性 #

当前CORS配置已满足基础要求，生产环境需替换为实际前端域名（禁止使用通配符，会与credentials: true冲突）：

app.use(cors({
    credentials: true,
    origin: process.env.NODE_ENV === 'production' ? 'https://your-frontend-domain.com' : 'http://localhost:3000'
}));

额外说明 #

• httpOnly Cookie无法通过前端JS读取，但浏览器会在请求时自动携带，属于正常安全机制，可在浏览器开发者工具的Application面板查看。
• 不要将httpOnly类型的refreshToken存入localStorage，这会丧失其XSS防护的核心优势，刷新token的请求只需保持withCredentials: true即可让后端读取到Cookie。

内容的提问来源于stack exchange，提问作者princekings