Wagtail admin preview panel not working in production
The page preview in the Wagtail admin is working fine locally on my dev server, but in production, the preview is not displayed, just a spinning wheel. In the Chrome dev tools console, I see the error message:
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.
where I replaced my actual domain by "example.com".
In production, I'm using Wagtail 6 with nginx and gunicorn, serving media and static files from the same server.
Here are the relevant parts of my nginx config, with some data XXXXed out:
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;
}
}
In the base settings, I have set
WAGTAILADMIN_BASE_URL = "https://example.com"
and on /admin/sites/
, the have set the site hostname to "example.com".
I'm not sure why I'm running into this cross-site thing at all, and how to fix it.