Next.js中getServerSideProps服务端请求无法使用会话Cookie

核心原因分析 #

1. Cookie域限制：会话Cookie默认绑定在api.domain.com，客户端所在的app.domain.com无法直接访问该Cookie；同时getServerSideProps运行在Next.js服务器端，请求后端时不会自动携带浏览器中的Cookie，需要手动转发。
2. cookie-session配置缺失：未明确指定Cookie的父域，导致跨子域无法共享。

解决方案步骤 #

1. 修正Express的cookie-session配置 #

必须指定Cookie的domain为父域.domain.com，同时调整sameSite和secure适配跨域场景：

app.use(
    cookieSession({
        signed: false,
        secure: true, // 仅HTTPS环境生效，开发环境可临时设为false
        httpOnly: true, // 保持true，避免XSS风险
        sameSite: "none", // 跨域场景必须设为none
        domain: ".domain.com" // 父域，让所有子域共享Cookie
    })
);

注意：开发环境如果用HTTP，需要把secure设为false，否则Cookie不会被存储。

2. 在getServerSideProps中手动转发Cookie #

Next.js服务器收到客户端请求时，浏览器会把符合.domain.com的Cookie放在context.req.headers.cookie里，需要在Axios请求后端时手动带上这个Cookie：

export async function getServerSideProps(context) {
    try {
        // 从请求头中获取Cookie
        const cookies = context.req.headers.cookie;
        
        const response = await axios.get('https://api.domain.com/your-endpoint', {
            headers: {
                // 把Cookie转发给后端API
                Cookie: cookies
            }
        });

        return {
            props: { data: response.data }
        };
    } catch (error) {
        console.error('请求失败:', error);
        return { props: {} };
    }
}

3. 额外检查项 #

• 确保前后端都使用HTTPS（生产环境），secure: true要求Cookie仅在HTTPS下传输。
• 确认浏览器中存储的Cookie的domain是.domain.com，而非api.domain.com。
• 跨域请求时，后端需要配置CORS，允许app.domain.com的请求，并设置credentials: true：

// Express CORS配置示例
const cors = require('cors');
app.use(cors({
    origin: 'https://app.domain.com',
    credentials: true // 允许携带凭证（Cookie）
}));

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