移动端访问Next.js开发版应用时Cookie无法正常工作的解决办法

核心原因 #

当用私有IP（比如192.XXX.X.24）访问Next.js开发服务器时，浏览器不会把它当成和localhost一样的特殊安全上下文，再加上Cookie的SameSite、Secure、Domain属性配置不当，就会导致Cookie无法存储或随请求发送。

具体解决步骤 #

1. 调整Next.js开发服务器配置 #

修改项目根目录的next.config.js，添加信任代理和跨域头配置，确保服务器允许带凭证的请求：

module.exports = {
  // 信任代理，确保服务器能正确识别客户端IP和协议
  trustProxy: true,

  async headers() {
    return [
      {
        // 对所有API路由生效
        source: '/api/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Credentials',
            value: 'true'
          },
          {
            // 替换成你的私有IP
            key: 'Access-Control-Allow-Origin',
            value: 'http://192.XXX.X.24:3000'
          }
        ]
      }
    ]
  }
}

2. 正确设置Cookie属性 #

在API路由或服务器端逻辑中设置Cookie时，指定适配私有IP访问的属性：

export default function handler(req, res) {
  const isProduction = process.env.NODE_ENV === 'production';
  res.setHeader('Set-Cookie', [
    `auth_token=your_token_here; 
     Path=/; 
     HttpOnly; 
     SameSite=Lax; 
     Domain=192.XXX.X.24; 
     Secure=${isProduction}`
  ]);
  res.status(200).json({ msg: 'Cookie已设置' });
}

• SameSite=Lax：适配非HTTPS的私有IP场景（如果用HTTPS可以设为None，但要配合Secure=true）
• Domain：明确指定你的私有IP，避免浏览器自动识别出问题
• Secure：开发环境（HTTP）设为false，生产环境（HTTPS）设为true

3. 前端请求携带凭证 #

不管用fetch还是axios发请求，必须带上凭证参数，确保Cookie随请求发送：

• 用fetch的例子：

fetch('/api/your-endpoint', {
  method: 'GET',
  // 携带凭证，同一域名/IP下用same-origin也可以，include兼容性更好
  credentials: 'include'
})

• 用axios的例子：

axios.get('/api/your-endpoint', {
  withCredentials: true
})

4. 可选：开启HTTPS开发服务器（解决安全上下文问题） #

如果浏览器因为HTTP非安全上下文限制Cookie，可以用mkcert生成本地信任证书，让Next.js用HTTPS运行：

1. 安装mkcert，生成证书：

   # 安装根证书到系统信任库
   mkcert -install
   # 为你的私有IP和localhost生成证书
   mkcert 192.XXX.X.24 localhost 127.0.0.1
   

2. 修改next.config.js配置HTTPS：

   const fs = require('fs');
   
   module.exports = {
     serverOptions: {
       https: {
         key: fs.readFileSync('./192.XXX.X.24-key.pem'),
         cert: fs.readFileSync('./192.XXX.X.24.pem'),
       },
     },
     // 其他配置...
   }
   

3. 启动开发服务器，现在可以通过https://192.XXX.X.24:3000访问，浏览器会认为是安全上下文，Cookie设置更顺畅。

5. 测试前清除旧Cookie #

浏览器可能缓存了之前错误配置的Cookie，测试前先在手机/开发机浏览器里清除对应站点的Cookie和缓存，避免干扰。

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