Docker环境下Django后端与React前端的CORS问题求助

核心问题分析 #

你遇到的CORS错误并非单纯的Django配置问题，而是浏览器的私有网络访问安全策略导致：前端从局域网地址http://192.168.1.63:3000（非localhost）发起请求到http://localhost:8000，浏览器认为这是从较公开的局域网地址访问更私密的本地地址空间，直接在请求发送前拦截了。同时前端请求的地址也存在错误——浏览器无法解析Docker内部的backendServer DNS，必须用宿主机可访问的地址。

具体解决步骤 #

1. 修正前端API请求地址 #

前端代码中不能用localhost:8000或backendServer作为API地址，必须替换为Docker宿主机的局域网IP+后端映射的端口，示例：

// 替换之前的localhost:8000
const API_BASE_URL = 'http://192.168.1.63:8000';

原因：前端运行在用户浏览器中，不属于Docker网络，无法访问容器内部的DNS，只能通过宿主机暴露的端口访问后端。

2. 确保django-cors-headers配置正确生效 #

• 检查中间件顺序：corsheaders.middleware.CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前，settings.py示例：

  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',  # 必须在前
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      # 其他中间件...
  ]
  

• 确认允许的源：确保CORS_ALLOWED_ORIGINS包含前端的完整地址：

  CORS_ALLOWED_ORIGINS = [
      "http://192.168.1.63:3000",
  ]
  

• 开发环境可临时开启全量允许（仅测试用）：

  CORS_ALLOW_ALL_ORIGINS = True
  

3. 验证Docker端口映射 #

确保Django后端容器已将8000端口映射到宿主机，docker-compose示例：

services:
  backend:
    # 其他配置...
    ports:
      - "8000:8000"  # 宿主机端口:容器端口

或者docker run命令：

docker run -p 8000:8000 your-backend-image

4. 绕过浏览器私有网络访问限制（开发测试用） #

如果上述步骤仍报错，是浏览器的Private Network Access策略拦截，可临时关闭：

• Chrome浏览器：打开chrome://flags/#block-insecure-private-network-requests，设置为Disabled，重启浏览器。
• 生产环境解决方案：将前端和后端都部署为HTTPS（开发环境可用mkcert生成自签名证书），安全上下文下浏览器允许跨地址空间访问。

5. 验证后端CORS响应头 #

用curl测试后端是否返回正确的CORS头，确认配置生效：

curl -H "Origin: http://192.168.1.63:3000" -I http://192.168.1.63:8000/api/project/?page=1

检查响应头中是否存在Access-Control-Allow-Origin: http://192.168.1.63:3000，如果没有，说明django-cors-headers未生效，需重新检查INSTALLED_APPS和中间件配置。

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