Docker部署React+Django容器登录请求端口配置问题求助

看起来你遇到的核心问题是React前端的API请求默认发到了自身的3000端口，而不是Django后端的8000端口。下面分开发环境和Docker部署环境给你几种可行的解决方案：

方案1：使用环境变量配置API基础地址（推荐，兼容开发和生产） #

这种方式最灵活，不管是本地开发还是Docker部署都能适配。

1. 在React项目根目录创建一个.env文件（注意文件名不能错），添加以下内容：

REACT_APP_API_BASE_URL=http://localhost:8000

注意：create-react-app要求环境变量必须以REACT_APP_开头才会被加载，别写错前缀。

2. 修改src/actions/user.js里的loginUser动作创建器，把硬编码的URL改成用环境变量拼接：

// 原来的请求URL可能是这样的：
// const url = '/api/obtain-auth-token/'

// 修改为：
const baseUrl = process.env.REACT_APP_API_BASE_URL;
const url = `${baseUrl}/api/obtain-auth-token/`;

// 然后发起请求，比如用axios或者fetch
axios.post(url, credentials)
  .then(...)
  .catch(...);

3. Docker部署适配：如果用Docker Compose编排容器，后端服务的地址不要用localhost，改用Docker Compose里的服务名称（比如你的后端服务叫django），所以.env里的地址要改成：

REACT_APP_API_BASE_URL=http://django:8000

这样前端容器就能通过Docker内部网络访问到后端服务了。

方案2：在package.json中配置代理（仅开发环境适用） #

如果你只是在本地开发时需要转发请求，可以直接在React项目的package.json里添加proxy字段：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:8000",
  // ...其他配置
}

这样当你在开发模式下（npm start）发起/api/obtain-auth-token/的请求时，create-react-app的开发服务器会自动把请求转发到http://localhost:8000/api/obtain-auth-token/。

注意：这个配置只在开发环境生效，生产环境打包后的静态文件不会有代理功能，所以部署到Docker还是得用方案1的环境变量方式。

方案3：Docker Compose网络与Nginx反向代理（生产部署进阶） #

如果你的生产环境想用Nginx做前端静态文件服务和反向代理，可以这样配置：

1. 编写nginx.conf：

server {
  listen 80;
  server_name localhost;

  # 处理前端静态文件
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }

  # 转发API请求到后端
  location /api/ {
    proxy_pass http://django:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

2. 在Docker Compose里定义Nginx服务，把前端静态文件挂载进去，同时和后端服务在同一网络：

version: '3.8'
services:
  django:
    build: ./backend
    ports:
      - "8000:8000"
    # ...其他后端配置

  react:
    build: ./frontend
    command: npm run build
    volumes:
      - ./frontend/build:/usr/share/nginx/html

  nginx:
    image: nginx:alpine
    ports:
      - "3000:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./frontend/build:/usr/share/nginx/html
    depends_on:
      - django
      - react

这种方式下，前端的API请求直接用/api/obtain-auth-token/即可，Nginx会自动转发到后端的8000端口，不需要修改前端代码里的URL。

验证修改 #

不管用哪种方案，修改后记得：

• 本地开发要重启React开发服务器（npm start），让环境变量或proxy配置生效
• Docker部署要重新构建前端镜像，确保新的配置被打包进去

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