React+Django+Nginx+Docker部署出现CORS did not succeed错误如何解决？

核心问题定位 #

• 最优先级问题：你前端代码中的API请求地址写死为http://127.0.0.1:8000，从其他局域网设备访问时，浏览器会往设备自身的8000端口发请求，根本没有到达你的部署服务器，自然会请求失败触发CORS报错。
• 次要问题：Nginx配置存在语法错误和逻辑冲突，同时Nginx和Django双重配置CORS导致头信息冲突。
• 补充问题：Django的CORS配置不完善，部分场景下会拦截OPTIONS预检请求。

修复步骤 #

1. 修正前端请求地址 #

把所有前端代码中写死的http://127.0.0.1:8000前缀替换为相对路径/api/，确保所有API请求统一发送到Nginx服务端口，由Nginx统一转发到后端服务。

2. 修正Nginx配置 #

调整你的nginx-proxy.conf如下：

upstream api {
    server backend:8000;
}

server {
    server_name _;
    # 确认监听端口和Docker端口映射匹配，如果你对外暴露的是宿主机80端口，这里要么改listen 80，要么映射宿主机80到容器8080
    listen 8080;

    # 移除所有Nginx侧的CORS头配置，统一交给Django的corsheaders处理，避免重复头冲突
    # ignore cache frontend
    location ~* (service-worker\.js)$ {
        expires off;
        proxy_no_cache 1;
    }

    location / {
        root /var/www/react-frontend;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {  
        # 移除多余的$request_uri和尾斜杠，避免路径重写错误
        proxy_pass http://api;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        # 把Host头传递给后端，避免Django拦截请求
        proxy_set_header Host $host;
        proxy_redirect off;
    }
}

3. 完善Django配置 #

调整Django的settings.py配置：

DEBUG = False

ALLOWED_HOSTS = ['*']
# CORS基础配置
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
# 显式指定允许的请求方法
CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]
# 允许所有请求头
CORS_ALLOW_HEADERS = ["*"]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    #Django Apps:
    'authentication',

    #Packages:
    'rest_framework',
    'corsheaders',
]

# 确保CorsMiddleware排在MIDDLEWARE第一位，特别是在CommonMiddleware之前
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 剩下的原有中间件保持不变
    ...
]

如果你的API不需要CSRF校验，可以给对应接口添加@csrf_exempt装饰器，或者在开发环境临时关闭CSRF中间件。

4. 验证测试 #

重启所有Docker容器，从局域网其他设备访问http://192.168.100.6，打开浏览器开发者工具确认：

• API请求的目标地址为http://192.168.100.6/api/xxx，而非127.0.0.1地址
• OPTIONS预检请求返回200状态码，响应头中包含Access-Control-Allow-Origin: *
• 后续POST请求可以正常返回数据

内容的提问来源于stack exchange，提问作者a-maccormack