Supabase本地开发环境CORS问题解决方案

问题背景

在使用Supabase进行本地开发时，特别是与Nuxt.js前端框架集成时，开发者经常会遇到跨域资源共享(CORS)问题。典型表现为浏览器控制台报错"Access-Control-Allow-Origin头缺失"，这会导致前端应用无法正常与本地Supabase服务进行交互。

问题根源分析

CORS问题通常由以下几个配置不当引起：

1. 端口配置不一致：Supabase默认使用54321端口，而开发者可能误配置为54323端口
2. 域名/IP混用：配置中同时使用了localhost和127.0.0.1，导致浏览器视为不同源
3. CORS白名单缺失：Supabase服务未明确配置允许前端应用域名的跨域请求

详细解决方案

1. 检查并修正Supabase配置

在Supabase项目的config.toml配置文件中，确保添加了前端应用的域名到CORS白名单：

[api]
cors_allowed_origins = ["http://localhost:3000"]  # 根据实际前端开发端口调整

2. 端口一致性检查

Supabase本地开发默认使用以下端口：

• API服务端口：54321
• 数据库端口：5432

确保前端应用配置的Supabase URL端口与API服务端口一致：

// Nuxt配置示例
supabase: {
  url: 'http://localhost:54321',  // 确保端口正确
  key: 'your-anon-key'
}

3. 域名/IP统一规范

避免混合使用不同形式的本地地址：

• 统一使用localhost或统一使用127.0.0.1
• 不建议两者混用，因为浏览器会视为不同源

4. 服务重启与验证

修改配置后，必须重启Supabase服务使更改生效：

# 停止服务
supabase stop

# 启动服务
supabase start

高级排查技巧

如果按照上述步骤仍无法解决问题，可以尝试：

1. 检查浏览器网络请求，确认实际请求的URL和返回的headers
2. 临时关闭浏览器安全策略进行测试（仅限开发环境）
3. 使用Postman等工具直接测试API端点，排除前端代码问题

最佳实践建议

1. 开发环境建议使用localhost而非IP地址
2. 为不同环境（开发、测试、生产）维护独立的配置
3. 考虑使用环境变量管理敏感配置
4. 定期检查Supabase CLI版本，确保使用最新稳定版

通过以上系统化的配置检查和调整，可以彻底解决Supabase本地开发中的CORS问题，确保前后端顺畅交互。