Wagtail生产环境后台预览面板失效，报跨域SecurityError求助

问题背景 #

本地开发环境中Wagtail后台页面预览功能正常，但部署到生产环境后，预览页面一直加载转圈，无法显示内容。Chrome控制台抛出跨域错误：

Uncaught SecurityError: Failed to read a named property 'scroll' from 'Window': Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.

生产环境配置：

• Wagtail 6
• Nginx + Gunicorn
• 静态文件、媒体文件均由同一服务器托管

已完成的配置：

• Django settings中设置了WAGTAILADMIN_BASE_URL = "https://example.com"
• Wagtail后台/admin/sites/中站点主机名已设为example.com

Nginx核心配置片段：

upstream app_server { 
    server unix:/opt/example-com/gunicorn.socket fail_timeout=0; 
} 

server { 
    listen          80; 
    server_name     example.com;
    rewrite ^/(.*)  https://example.com/$1 permanent; 
} 

server { 
    listen 443 ssl; 
    server_name example.com; 
     
    client_max_body_size 50M; 

    ssl_certificate         XXXX
    ssl_certificate_key     XXXX
      
    location /static/ { 
        alias /opt/example-com/static/; 
    } 

    location /media/ { 
        alias /opt/example-com/media/; 
    } 

    location / { 
        include proxy_params; 
        proxy_pass http://unix:/opt/example-com/gunicorn.socket; 
    } 
    location /admin/ { 
        include proxy_params; 
        proxy_pass http://unix:/opt/example-com/gunicorn.socket; 
    } 
}

解决步骤 #

1. 修复Nginx代理的Host头传递 #

检查系统中的proxy_params文件（默认路径：/etc/nginx/proxy_params），确保包含以下配置项：

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;

如果缺少proxy_set_header Host $host;，必须添加这一行。Wagtail生成预览iframe的URL时依赖正确的Host头，若代理未传递该参数，会导致iframe页面的源与后台页面不一致，触发浏览器跨域安全限制。

2. 完善Wagtail站点配置 #

进入Wagtail后台/admin/sites/编辑对应站点：

• 确认站点域名填写为example.com（不要带http/https前缀）
• 确认站点根URL设置为https://example.com/（必须包含完整协议和结尾斜杠）

3. 重启服务并清除缓存 #

• 重启Nginx和Gunicorn，使配置生效：

sudo systemctl restart nginx
sudo systemctl restart gunicorn  # 根据你的实际服务名调整

• 清除Chrome浏览器的缓存和Cookie，避免旧的安全策略缓存干扰预览功能。

4. 检查Content-Security-Policy（CSP）配置 #

如果你的站点配置了CSP规则，需确保允许同源iframe加载：

• 若通过Nginx设置CSP，添加以下配置到443端口的server块中：

add_header Content-Security-Policy "frame-src 'self';";

• 若使用Django的django-csp插件，确保settings.py中CSP_FRAME_SRC = ["'self'"]

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