Docker部署React+Django遇CORS跨域问题：API请求被拦截

核心问题分析 #

你遇到的CORS错误本质是Nginx反向代理没有正确传递后端返回的CORS响应头，加上Django配置的细节疏漏，导致浏览器无法识别跨域允许规则。以下是具体修复步骤：

1. 修正Nginx后端代理配置 #

你的请求通过localhost:8000（Nginx服务）转发到Django后端，必须确保Nginx完整传递后端的CORS响应头。修改nginx_backend_server的配置文件（如nginx.conf）：

server {
    listen 8000;

    location / {
        # 转发请求到Docker内部的backend服务（端口需与Django容器内端口一致，默认8000）
        proxy_pass http://backend:8000;
        
        # 保留原始请求头信息
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 关键配置：传递后端返回的CORS相关响应头
        proxy_pass_header Access-Control-Allow-Origin;
        proxy_pass_header Access-Control-Allow-Methods;
        proxy_pass_header Access-Control-Allow-Headers;
    }
}

2. 调整Django配置 #

2.1 修正settings.py

• 开发环境下允许所有主机访问（生产环境需替换为具体域名）：

  ALLOWED_HOSTS = ["*"]
  

• 保留django-cors-headers的核心配置即可，CORS_ORIGIN_ALLOW_ALL=True会覆盖CORS_ALLOWED_ORIGINS：

  CORS_ORIGIN_ALLOW_ALL = True
  CORS_ALLOW_METHODS = ("DELETE", "GET", "OPTIONS", "PATCH", "POST", "PUT")
  CORS_ALLOW_HEADERS = (
      "accept",
      "accept-encoding",
      "authorization",
      "content-type",
      "dnt",
      "user-agent",
      "x-csrftoken",
      "x-requested-with",
      "x-user-agent",
  )
  

2.2 移除ViewSet中的手动响应头代码

无需在MenuItemViewSet中手动添加Access-Control-Allow-Origin，django-cors-headers会自动处理，手动添加可能导致响应头冲突：

# 删除这段冗余代码
def finalize_response(self, request, response, *args, **kwargs):
    response["Access-Control-Allow-Origin"] = "*"
    return super().finalize_response(request, response, *args, **kwargs)

3. 重启Docker服务 #

修改配置后，必须重新构建并启动容器：

docker-compose down
docker-compose up --build

4. 测试验证 #

• 清除浏览器缓存（快捷键Ctrl+Shift+R）
• 重新调用前端接口，检查控制台是否仍存在CORS错误

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