Docker桥接网络下Angular访问Express后端CORS错误排查求助

1. 前端请求地址核心问题 #

• 前端代码里直接写http://backend:4000/crafts是错误的：backend是Docker桥接网络内部的DNS主机名，浏览器运行在宿主机/外部环境，根本无法解析这个内部域名，这是跨域报错的本质原因。
• 修复方式：
  • 方案一：通过Nginx反向代理统一路径，前端请求/api/crafts，由Nginx转发到http://backend:4000/crafts。
  • 方案二：前端请求宿主机IP/域名 + 后端容器映射的宿主机端口，比如http://192.168.1.100:4000/crafts（需确保后端容器已做端口映射：docker run -p 4000:4000 ...）。

2. Express CORS配置验证 #

• 别只依赖默认的app.use(cors())，明确配置允许的Origin：

  const corsOptions = {
    origin: "http://你的前端访问地址", // 比如http://localhost:8080，生产环境别用*
    credentials: true // 若请求带Cookie需开启
  };
  app.use(cors(corsOptions));
  

• 用curl验证CORS头是否生效：

  curl -I -H "Origin: http://你的前端访问地址" http://backend:4000/crafts
  

  检查返回头中是否存在Access-Control-Allow-Origin且值与指定Origin一致。

3. Nginx配置检查 #

• 确认反向代理规则正确，示例配置：

  location /api/ {
      proxy_pass http://backend:4000/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      # 若在Nginx层面处理CORS，需添加以下头（与Express配置二选一，避免重复）
      add_header Access-Control-Allow-Origin "http://你的前端访问地址";
      add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
      add_header Access-Control-Allow-Headers "Content-Type";
  }
  

• 修改Nginx配置后，必须执行nginx -s reload或重启容器让配置生效。
• 确认前端静态文件托管路径正确，确保前端页面能正常加载，且请求路径与反向代理规则匹配。

4. Docker网络连通性测试 #

• 在前端容器内执行curl http://backend:4000/crafts，如果能正常返回数据，说明容器间网络连通性没问题，问题集中在前端请求路径或CORS配置上。
• 若不通，检查Docker桥接网络是否正确创建，后端容器是否加入该网络。

5. 浏览器缓存清理 #

• 浏览器可能缓存旧的CORS响应，尝试用隐私窗口打开页面，或按Ctrl+Shift+Delete清除缓存后重新测试。

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