React应用Docker容器内代理失效问题求助

问题现象 #

未使用Docker时，分别在两个终端运行React和Django一切正常，但使用docker-compose时代理失效，报错：

Proxy error: Could not proxy request /doc from localhost:3000 to http://127.0.0.1:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

每次修改package.json后，必须删除node_modules和package-lock.json再重新执行npm install才能让代理配置生效，缓存问题严重。尝试过多种proxy配置均无效：

"proxy": "http://localhost:8000/",
"proxy": "http://localhost:8000",
"proxy": "http://127.0.0.1:8000/",
"proxy": "http://0.0.0.0:8000/",
"proxy": "http://<my_ip>:8000/",
"proxy": "http://backend:8000/",  # Django服务名称

确认非容器环境代理正常，问题出在Docker配置，开发阶段不想使用Nginx。

修复步骤 #

1. 修正Django的监听地址 #

当前docker-compose中backend服务的启动命令绑定了127.0.0.1，导致仅容器内部localhost可访问，其他容器无法连接。修改为监听所有网卡：

services:
  backend:
    command: python manage.py runserver 0.0.0.0:8000

同时更新DJANGO_ALLOWED_HOSTS，允许通过服务名backend访问：

environment:
  - DJANGO_ALLOWED_HOSTS=localhost 127.0.0.1 backend

2. 配置React的正确代理地址 #

在package.json中，使用Docker Compose的服务名backend作为代理目标（同一网络下容器可通过服务名互相访问）：

{
  "proxy": "http://backend:8000"
}

3. 解决package.json修改后的缓存问题 #

无需每次删除node_modules，在frontend的docker-compose配置中添加匿名卷隔离容器内的node_modules，避免本地目录覆盖：

services:
  frontend:
    volumes:
      - ./frontend:/usr/src/frontend
      - /usr/src/frontend/node_modules  # 新增：隔离容器内的依赖包
      - ./monkey_site/static:/usr/src/frontend/src/static

修改package.json后，只需重新构建frontend镜像并重启容器：

docker-compose build frontend
docker-compose up -d frontend

4. 完善跨域配置（可选） #

确保Django的django-cors-headers允许frontend容器访问，补充添加服务名相关的origin：

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000', 
    'http://127.0.0.1:3000',
    'http://frontend:3000'
]

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