Nuxt3生产环境中Supabase Cookie无法设置问题求助

问题场景 #

构建应用后用yarn preview启动，仅http://localhost:3000和http://127.0.0.1:3000能正常设置Supabase Cookie，使用0.0.0.0、[::]或本地局域网IP（如192.168.1.3）时Cookie无法设置，开发模式下localhost/127.0.0.1运行正常。

解决步骤 #

1. 配置Supabase项目的Allowed Origins

• 登录Supabase控制台，进入对应项目的Settings > API页面
• 在「Allowed Origins」区域，添加你需要测试的地址：http://192.168.1.3:3000、http://0.0.0.0:3000、http://[::]:3000
• 保存配置，确保这些地址被纳入Supabase的信任列表

2. 调整Supabase客户端的Cookie参数

初始化Supabase客户端时，显式配置cookieOptions，让Cookie适配当前访问地址：

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY,
  {
    auth: {
      cookieOptions: {
        domain: window.location.hostname, // 自动匹配当前访问的域名/IP
        sameSite: 'lax', // 本地HTTP环境用'lax'即可，HTTPS环境可按需调整
        secure: false, // 本地HTTP设为false，生产HTTPS环境改为true
      }
    }
  }
)

3. 配置预览服务器允许外部访问

如果用Vite构建，修改vite.config.js，让预览服务器允许所有主机访问：

export default {
  preview: {
    host: true, // 允许通过任意IP/域名访问
    port: 3000,
  }
}

4. 清除浏览器缓存旧Cookie

测试前彻底清除浏览器中与当前应用相关的缓存和Cookie，避免旧配置干扰。

原因说明 #

• Supabase默认仅信任localhost和127.0.0.1，未添加到Allowed Origins的地址会被Auth API拒绝设置Cookie
• Cookie的domain属性必须与当前访问地址匹配，浏览器才会保存Cookie
• 生产构建后的预览服务器需要明确允许外部访问，否则可能存在跨域限制

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