使用docker-compose编排时Next.js容器无法连接Docker后端API容器问题咨询

1. 无法通过localhost访问后端的根因 #

容器的网络命名空间独立，每个容器内的localhost指向容器自身，而非宿主机或其他容器。你当前三个服务都加入了express-api桥接网络，在frontend容器内访问后端直接使用服务名api即可，对应地址为http://api:4000。
如果需要在宿主机浏览器直接访问后端，先检查Express服务是否监听0.0.0.0而非127.0.0.1，只要监听0.0.0.0，宿主机访问localhost:4000即可正常连通。

2. 请求超时与CORS问题处理 #

请求超时大概率是请求地址配置错误导致，CORS问题可以通过两种方案解决：

方案一：Express端配置CORS #

安装cors依赖，在Express服务入口添加配置：

const cors = require('cors')
app.use(cors({
  origin: ['http://localhost:3000', 'http://localhost:8080'] // 填写允许访问的前端地址
}))

同时注意区分Next.js两种请求场景的地址配置：

• 服务端请求（服务组件/SSR/接口路由内发起）：baseURL填http://api:4000
• 客户端请求（useEffect/用户交互触发的浏览器端请求）：baseURL填http://localhost:4000

方案二：通过Nginx统一代理（更推荐，彻底避免跨域） #

修改Nginx配置，将路径前缀为/api的请求转发到后端服务，其余请求转发到Next.js前端：

server {
  listen 80;
  # 前端请求转发
  location / {
    proxy_pass http://client:3000;
    proxy_set_header Host $host;
  }
  # 后端API请求转发
  location /api/ {
    proxy_pass http://api:4000/;
    proxy_set_header Host $host;
  }
}

配置后所有请求都可以走http://localhost:8080入口，前端无需区分服务端/客户端请求地址，直接用/api作为前缀即可，完全不存在跨域问题。

3. 环境变量优化建议 #

可以在.env文件中拆分两套地址配置，适配不同场景：

# 客户端调用API地址（NEXT_PUBLIC前缀的变量会暴露到客户端）
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api
# 服务端调用API地址
SERVER_API_BASE_URL=http://api:4000

在Next.js代码中根据请求场景选择对应变量即可。

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