部署Nginx反向代理后Django的CSRF Cookie未设置问题求助

核心问题 #

1. 跨域请求拦截Cookie：React中Axios请求硬编码了http://localhost:8000/csrf_cookie，通过Nginx反向代理（localhost:80）访问页面时，该请求属于跨域请求，浏览器同源策略会阻止Cookie设置。
2. Nginx未正确处理Cookie传递：反向代理配置缺少对Django返回Cookie的路径处理，导致浏览器无法识别并保存Cookie。
3. Django未信任反向代理来源：Django默认不认可反向代理的请求头，可能导致CSRF Token生成与验证逻辑异常。

分步解决方案 #

1. 修改Axios请求为相对路径 #

将请求地址从绝对路径改为相对路径，确保请求与当前页面同源：

// 原代码
axios.get('http://localhost:8000/csrf_cookie').then(...)

// 修改后
axios.get('/csrf_cookie').then(...)

2. 优化Nginx反向代理配置 #

更新conf.d下的配置文件，添加Cookie路径处理并移除冗余配置：

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 关键：让Django返回的Cookie适配反向代理根路径
        proxy_cookie_path / /;
        
        proxy_pass http://frontend:8000;
        
        # 移除不必要的Cookie头设置（Nginx默认会传递请求Cookie）
        # proxy_set_header Cookie $http_cookie;
    }
}

3. 配置Django信任反向代理与CSRF来源 #

在Django项目的settings.py中添加以下配置：

# 信任反向代理传递的请求头
USE_X_FORWARDED_HOST = True
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'http')  # 若用HTTPS则改为'https'

# 允许当前域名作为CSRF信任来源
CSRF_TRUSTED_ORIGINS = ['http://localhost']

# 可选：统一Cookie域名设置（跨子域名场景适用）
# SESSION_COOKIE_DOMAIN = 'localhost'
# CSRF_COOKIE_DOMAIN = 'localhost'

4. 重启服务验证 #

修改配置后，重启Docker Compose服务生效：

docker-compose down && docker-compose up -d

通过localhost访问页面，验证CSRF Token是否正常设置。

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