Nuxt.js+Express-Session无法设置Cookie的问题求助

Hey there! Let's work through this session persistence issue you're hitting with Nuxt, express-session, and connect-mongo. I’ve struggled through similar SSR auth headaches before, so here’s what you need to check and fix:

1. Double-Check Your express-session Cookie Configuration #

This is the most common culprit. Your session cookie needs to be configured correctly to be stored on the client and sent back with subsequent requests. Make sure your session setup includes these key settings:

const session = require('express-session');
const MongoStore = require('connect-mongo');

app.use(session({
  secret: 'your-strong-unique-secret-here', // Keep this safe in env vars!
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: process.env.MONGO_URI }),
  cookie: {
    httpOnly: true, // Prevents client-side JS from accessing the cookie (security win)
    secure: process.env.NODE_ENV === 'production', // Set to true only for HTTPS in production
    sameSite: 'lax', // Balances security and usability for cross-site requests
    maxAge: 24 * 60 * 60 * 1000, // 1 day expiration (adjust as needed)
    domain: process.env.NODE_ENV === 'production' ? 'your-production-domain.com' : undefined // Leave undefined for localhost
  }
}));

For localhost development, avoid setting a domain explicitly—browsers can be finicky about cookies on localhost with a custom domain set.

2. Properly Save User Data to the Session in Your Login Route #

In your existing /login endpoint, after verifying the user’s credentials successfully, you need to attach the user data to req.session—this triggers express-session to set the session cookie on the client. Here’s how to update your code:

router.post('/login', async function(req, res) {
  try {
    const user = await User.findOne({ username: req.body.username });
    
    if (!user) {
      return res.status(401).json({ message: 'Invalid credentials' });
    }

    // Add your password verification logic here (e.g., bcrypt.compare)
    const isPasswordValid = await bcrypt.compare(req.body.password, user.password);
    if (!isPasswordValid) {
      return res.status(401).json({ message: 'Invalid credentials' });
    }

    // Save user data to the session
    req.session.user = {
      id: user._id,
      username: user.username
      // Add other non-sensitive user fields as needed
    };

    res.status(200).json({ message: 'Login successful', user: req.session.user });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: 'Server error' });
  }
});

3. Configure Nuxt to Send & Receive Cookies #

Your Nuxt app needs to be told to include credentials (cookies) when making API requests. If you’re using @nuxtjs/axios, update your nuxt.config.js:

export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: process.env.API_URL, // e.g., 'http://localhost:5000/api'
    withCredentials: true // This tells axios to send cookies with requests
  }
};

If you’re using Nuxt 3 with useFetch or useAsyncData, make sure to pass the credentials: 'include' option:

const { data: user } = await useFetch('/api/auth/get-me', {
  credentials: 'include'
});

4. Sync Session Data on SSR Page Loads #

When a user refreshes the page, Nuxt renders on the server first—you need to pull the session data from the server’s req object and inject it into your app’s store or state so the client knows the user is authenticated.

Create an auth middleware (e.g., middleware/auth.js):

export default async function({ req, store, app }) {
  if (process.server) {
    // On the server, access the session directly from req
    if (req.session?.user) {
      store.commit('auth/setUser', req.session.user);
    }
  } else {
    // On the client, fetch the current user from your API to sync state
    try {
      const { data } = await app.$axios.get('/api/auth/get-me');
      if (data.user) {
        store.commit('auth/setUser', data.user);
      }
    } catch (err) {
      // Handle unauthenticated case (e.g., clear user state)
      store.commit('auth/clearUser');
    }
  }
}

Add a corresponding /api/auth/get-me endpoint on your backend to return the session user:

router.get('/auth/get-me', (req, res) => {
  if (!req.session?.user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  res.status(200).json({ user: req.session.user });
});

5. Fix CORS if You’re Running Nuxt & Backend on Different Ports #

If your Nuxt app is on localhost:3000 and backend on localhost:5000, you need to configure CORS to allow credentials and specify your Nuxt origin (don’t use *—it won’t work with credentials):

const cors = require('cors');
app.use(cors({
  origin: process.env.NUXT_URL, // e.g., 'http://localhost:3000'
  credentials: true
}));

Quick Troubleshooting Tips #

• Check your browser’s dev tools (Application tab > Cookies) to see if the session cookie is being set. If it’s missing, double-check your session and CORS configs.
• Verify that connect-mongo is successfully saving sessions to your MongoDB database—look for a sessions collection.
• Ensure your secret in express-session is the same across all environments (dev/prod)—a mismatch will invalidate sessions.

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