React+Docker环境WebSocket连接失败问题求助（Nginx反向代理）

问题描述 #

Docker环境中运行React应用，通过Nginx反向代理连接Go后端WebSocket时出现错误：

WebSocket connection to 'ws://backend:7000/api/getData' failed: WebSocket error

本地运行正常，仅Docker环境触发该问题。

核心原因 #

1. 浏览器无法解析Docker内部域名：前端硬编码ws://backend:7000，但backend是Docker Compose内部服务域名，用户浏览器（宿主机环境）无法识别该域名，导致连接失败。
2. CORS配置不匹配：后端CORS仅允许http://frontend:3000来源，但前端通过Nginx访问时，实际来源是http://localhost（或外部域名），被CORS策略拦截。
3. 未走Nginx反向代理：前端直接请求后端容器端口，绕过了Nginx的WebSocket升级配置，无法完成协议转换。

解决方案 #

1. 修改前端WebSocket连接地址 #

将硬编码的Docker内部地址改为通过Nginx代理的地址，自动适配当前页面的协议和域名：

// 原代码
const newSocket = new WebSocket("ws://backend:7000/api/getData");

// 修改后
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const newSocket = new WebSocket(`${protocol}//${window.location.host}/api/getData`);

2. 调整后端CORS配置 #

更新Go后端的CORS允许来源，包含前端实际访问的域名（如http://localhost）：

// 原代码
app.Use(cors.New(cors.Config{
    AllowOrigins: "http://frontend:3000",
}))

// 修改后（允许localhost和前端容器域名）
app.Use(cors.New(cors.Config{
    AllowOrigins: "http://localhost, http://frontend:3000",
    AllowCredentials: true, // 若需要携带Cookie，开启此项
}))

3. 优化Docker Compose配置（可选） #

后端服务无需对外暴露端口（前端通过Nginx访问），可移除backend的端口映射，增强安全性：

# 原backend配置
backend:
  build:
    context: ./backend
    dockerfile: Dockerfile
  ports:
    - "7000:7000" # 移除这一行
  restart: always

4. 验证Nginx配置 #

当前Nginx的/api location配置已包含WebSocket所需的头部和协议设置，无需修改：

location /api {
    proxy_pass http://backend:7000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

验证步骤 #

1. 重启所有Docker服务：docker-compose down && docker-compose up -d
2. 访问http://localhost，打开浏览器控制台检查WebSocket连接状态
3. 查看后端日志，确认WebSocket连接是否建立成功

内容的提问来源于stack exchange，提问作者Гор Манучарян