Next.js中Axios withCredentials配置失效问题求助

核心原因 #

Next.js区分客户端渲染（CSR）和服务器端渲染（SSR）/静态生成（SSG），你的代码在纯CSR的MERN应用中正常，但在Next.js里，服务器端发起的Axios请求不会自动携带浏览器Cookie，同时跨域配置也需要适配Next.js的规则。

针对性解决方案 #

1. 服务器端请求手动传递Cookie #

你的getUser函数接收ctx参数，说明可能在getServerSideProps或API路由中调用（服务器端环境）。此时需要从ctx中提取请求头的Cookie，手动添加到Axios请求中：

修改getUser函数（同时优化async/await写法，避免then/catch混用）：

export const getUser = async (ctx) => {
  // 构建请求配置，服务器端时注入Cookie
  const requestConfig = ctx?.req?.headers?.cookie 
    ? { headers: { cookie: ctx.req.headers.cookie } } 
    : {};

  try {
    const res = await app.get('/users/auth', requestConfig);
    return { status: true, user: res.data };
  } catch (error) {
    return { status: false, user: null };
  }
};

2. 适配Next.js跨域配置 #

在开发环境下，Next.js需要通过next.config.js配置跨域允许凭证传递，同时确保后端CORS配置正确：

前端Next.js配置（next.config.js）

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*', // 匹配所有前端路由
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: process.env.SERVER }, // 后端API地址
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE,OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

后端Express/CORS配置

确保后端CORS明确允许你的Next.js前端域名，并开启凭证支持：

const cors = require('cors');
app.use(cors({
  origin: process.env.NEXT_CLIENT_URL, // 比如http://localhost:3000
  credentials: true,
  optionsSuccessStatus: 200
}));

3. 避免服务器端Axios实例复用污染 #

服务器端的Axios实例如果被全局复用，可能会携带之前请求的Cookie导致认证混乱。可以将Axios实例改为工厂函数，根据上下文动态创建：

修改axiosConfig文件：

import axios from 'axios';

export const createAxiosInstance = (ctx) => {
  const baseUrl = process.env.SERVER;
  const instance = axios.create({
    baseURL: baseUrl,
    withCredentials: true,
  });

  // 服务器端时注入Cookie
  if (ctx?.req?.headers?.cookie) {
    instance.defaults.headers.cookie = ctx.req.headers.cookie;
  }

  instance.interceptors.response.use(
    (response) => response,
    (error) => Promise.reject(error.response?.data?.err || error),
  );
  
  return instance;
};

export default createAxiosInstance;

然后在认证函数中使用：

import createAxiosInstance from './axiosConfig';

export const getUser = async (ctx) => {
  const app = createAxiosInstance(ctx);
  try {
    const res = await app.get('/users/auth');
    return { status: true, user: res.data };
  } catch (error) {
    return { status: false, user: null };
  }
};

4. 优化登录后的页面刷新逻辑 #

Next.js中推荐使用内置的路由API替代window.location.reload()：

import { useRouter } from 'next/router';

export const login = async (username, password, setUser, setLoading, setError) => {
  const router = useRouter();
  try {
    const res = await app.post('/users/login', { username, password });
    setUser(res.data);
    router.reload(); // 替代window.location.reload()
  } catch (err) {
    setError(err.response?.data?.message || 'Network error! Try again');
  }
};

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