Docker环境下NestJS API被NextJS前端CORS拦截问题求解

核心错误是混淆了Docker内网域名和客户端可访问域名的作用范围：

• dev是Docker Compose自定义网络内的内部服务域名，仅能被同一网络下的容器解析访问
• 你看到的控制台CORS报错、Network Error，全部来自浏览器端发起的客户端侧请求：浏览器运行在你的宿主机上，根本无法识别dev这个域名，自然无法正常完成请求和跨域校验
• 你提到的“API数据能正常展示”，是Next.js服务端渲染(SSR/SSG)阶段的功劳：这部分请求运行在Next容器内部，属于Docker内网环境，可以正常解析dev域名拿到数据完成首屏渲染，但后续客户端路由跳转、交互触发的接口请求都会直接失败。

二选一即可，优先选择方案1，符合生产环境部署规范。

方案1：通过Nginx反向代理实现同域请求（推荐） #

不要在前端代码中直接写后端服务的内部地址，所有API请求统一走当前站点的同域名代理，从根源上规避跨域问题：

1. 修改前端环境变量，将接口地址改为同域相对路径

   # 前端.env配置文件
   BASE_API_URL=/api
   

2. 修改Nginx的default.conf配置，新增API路径的反向代理规则，将匹配到的API请求转发到后端Nest服务

   server {
       listen 80;
       server_name localhost;
   
       # 转发前端请求到Next服务
       location / {
           proxy_pass http://frontend:3000; # 替换为你Next容器在docker-compose中的服务名
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   
       # 转发API请求到Nest后端服务
       location /api/ {
           # 后端接口本身无/api前缀时加这行重写路径，有前缀则删除
           rewrite ^/api/(.*)$ /$1 break;
           proxy_pass http://dev:3001; # Nginx运行在容器内网，可正常解析dev域名
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           client_max_body_size 100m; # 适配文件上传场景可按需调整
       }
   }
   

3. 执行命令重启Nginx容器让配置生效：docker-compose restart nginx
   配置完成后，浏览器端所有API请求都会发往http://localhost:3000/api/xxx，属于同源请求，不会触发CORS校验，Nginx会在服务端完成请求转发，彻底解决跨域报错。

方案2：后端开启CORS允许跨域（仅适合本地开发场景） #

如果不想配置反向代理，也可以直接在NestJS后端开启跨域允许规则，同时把前端接口地址改为宿主机可访问的后端地址：

1. 修改NestJS入口文件main.ts，开启CORS配置

   async function bootstrap() {
     const app = await NestFactory.create(AppModule);
     // 本地开发临时开启跨域，生产环境不建议使用
     app.enableCors({
       origin: 'http://localhost:3000', // 允许前端源访问
       credentials: true, // 涉及Cookie、鉴权头传递时开启
     });
     await app.listen(3001);
   }
   bootstrap();
   

2. 修改前端.env中的接口地址，注意绝对不能继续用http://dev:3001，浏览器无法解析Docker内网域名

   BASE_API_URL=http://localhost:3001
   

3. 执行命令重新构建镜像并重启服务：docker-compose up -d --build

不要尝试通过修改本地hosts文件添加127.0.0.1 dev映射解决问题，这种方式虽然能让浏览器解析dev域名，但本质还是跨域请求，要么配置CORS要么走代理，和方案2没有区别，且不适合生产环境。

内容的提问来源于stack exchange，提问作者Saadman Sayeed Saad