127.0.0.1与localhost配置冲突求助：Next.js+Supabase+Docker环境

问题根源分析 #

1. Docker容器访问失败：Next.js绑定127.0.0.1时，该地址仅指向容器内部的回环网卡，外部主机无法通过端口映射连接到服务。
2. Supabase认证回调错误：容器内应用用127.0.0.1访问宿主机Supabase时，会指向容器自身而非宿主机；同时Supabase控制台的回调URL配置与应用实际访问地址不匹配，导致跳转验证失败。

具体修复步骤 #

1. 修改Next.js启动命令，允许外部访问 #

更新package.json中的dev命令，将绑定地址改为0.0.0.0，让容器内服务监听所有网卡，确保外部主机可通过端口映射访问：

"dev": "next dev --hostname 0.0.0.0 --port 3000"

2. 调整容器内访问Supabase的地址 #

容器内无法通过127.0.0.1访问宿主机上的Supabase服务，需替换为对应地址：

• Windows/macOS：直接使用Docker内置的host.docker.internal（该地址自动指向宿主机）
• Linux：添加extra_hosts配置（见步骤4），或使用宿主机的局域网IP（如192.168.x.x）

更新项目的环境变量文件（如.env.local）：

NEXT_PUBLIC_SUPABASE_URL=http://host.docker.internal:54321
SUPABASE_SERVICE_ROLE_KEY=你的服务角色密钥

3. 修正Supabase认证回调URL #

登录Supabase Studio（http://127.0.0.1:54323），进入Authentication -> URL Configuration，将Site URL和Redirect URLs设置为宿主机上访问Next.js的地址：

• Site URL: http://localhost:3000
• Redirect URLs: http://localhost:3000/auth/callback

4. Linux环境额外配置（可选） #

Linux系统默认不支持host.docker.internal，需在docker-compose.yml中添加extra_hosts：

services:
  open-math-prep-dev:
    # 原有配置...
    extra_hosts:
      - "host.docker.internal:host-gateway"

5. 重启服务验证 #

1. 重启Supabase服务确保配置生效
2. 重新构建并启动Docker容器：

docker-compose down && docker-compose up --build

现在访问http://localhost:3000即可正常加载应用，谷歌认证跳转也不会出现Bad Request错误。

内容的提问来源于stack exchange，提问作者choo liang yi