Docker Compose搭建NextJS前端+Ruby on Rails后端项目CORS跨域问题求解

问题根本原因 #

你遇到的Docker别名无法解析+跨域问题，本质是运行在用户浏览器里的前端代码，无法访问Docker内部网络的服务别名：Docker Compose的服务别名（比如你的backend）仅支持同网络下的容器之间互相访问，浏览器属于宿主机/用户端的外部程序，根本解析不了这个别名，这个问题和rack-cors配置没有关系。

关于客户端/服务端请求区分的问题 #

• 这是NextJS类全栈项目的标准最优解决方案，你无法仅靠配置rack-cors绕开这个逻辑：
  1. NextJS的服务端渲染（SSR）、服务端组件、API路由内发起的请求，运行在frontend_prod/frontend_dev容器内部，属于Docker网络内的调用，这时候必须用http://backend:3000作为接口地址才能连通
  2. 浏览器端运行的前端代码（比如客户端组件、useEffect内发起的请求、用户交互触发的请求），运行在用户本地设备，只能用宿主机暴露的地址（开发环境用http://localhost:3000，生产环境用后端实际部署域名）
• 哪怕你把rack-cors配置成全允许跨域，浏览器请求的地址是http://backend:3000的话，第一步DNS解析就会失败，根本到不了后端校验CORS的环节，所以不可能仅靠修改rack-cors解决问题。
• 当然你还是要正确配置rack-cors，允许对应前端域名的跨域请求，不然地址通了之后还是会被CORS策略拦截。

接口地址自动适配方案 #

完全不需要上线手动修改地址，用NextJS内置的环境变量机制区分运行环境即可：

1. 在你的.env配置文件中定义两个环境变量：

# 服务端调用接口用的地址，Docker网络内直接访问服务别名
NEXT_PUBLIC_API_BASE_URL_SERVER=http://backend:3000
# 客户端调用接口用的地址，开发环境填localhost，生产环境填后端实际域名
NEXT_PUBLIC_API_BASE_URL_CLIENT=http://localhost:3000

2. 生产环境部署时，直接用部署平台的环境变量配置功能覆盖NEXT_PUBLIC_API_BASE_URL_CLIENT的值为你的后端正式域名即可，无需修改任何代码。
3. 封装统一的请求工具，自动判断当前运行环境选择对应地址：

// 统一请求工具的基础地址配置
const getBaseUrl = () => {
  // 判断当前是否为服务端运行环境
  if (typeof window === 'undefined') {
    return process.env.NEXT_PUBLIC_API_BASE_URL_SERVER
  }
  return process.env.NEXT_PUBLIC_API_BASE_URL_CLIENT
}

可选优化：加反向代理统一地址 #

如果你不想维护两套接口地址，可以额外加一层Nginx反向代理：

• 配置Nginx把所有路径前缀为/api的请求转发到后端服务
• 前端不管是服务端还是客户端发起请求，统一用/api作为路径前缀即可，无需再配置不同的接口域名。

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