Ghost 4+自定义后台子域名编辑区域无法连接报错如何解决？

错误根源 #

该编辑器iframe拒绝连接问题由三个配置错误共同导致：

• Ghost配置文件存在语法笔误
• 缺失admin子域名的Nginx反向代理配置，仅靠Cloudflare重定向会触发同源策略、内容安全策略（CSP）限制
• Admin域名和主站域名的跨域访问规则未放行

第一步：修正Ghost配置文件 #

首先修正config.production.json的笔误，原配置中主站url参数少了一个斜杠，正确配置如下：

{
  "url": "https://mysite.com",
  "admin": {
    "url": "https://admin.mysite.com"
  },
  "server": {
    "port": 2369,
    "host": "127.0.0.1"
  }
  // 其他原有配置保持不变
}

修改完成后执行ghost restart重启Ghost服务生效。

第二步：配置admin子域名的Nginx反向代理 #

在Nginx的站点配置目录（通常是/etc/nginx/sites-available/）新建admin.mysite.com.conf文件，写入以下配置：

server {
    listen 80;
    server_name admin.mysite.com;
    
    # 重定向HTTP到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name admin.mysite.com;
    
    # SSL证书配置，可使用Certbot自动生成或者填写Cloudflare源站证书路径
    ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/privkey.pem;
    
    # 根路径直接重定向到Ghost后台路径，不需要额外配置Cloudflare重定向规则
    location = / {
        return 301 /ghost/;
    }
    
    # 反向代理到Ghost服务
    location / {
        proxy_set_header Host $http_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_pass http://127.0.0.1:2369;
        
        # 放行内容安全策略，允许后台iframe嵌入主站内容
        add_header Content-Security-Policy "frame-ancestors 'self' https://mysite.com https://admin.mysite.com;";
    }
}

配置完成后依次执行：

1. ln -s /etc/nginx/sites-available/admin.mysite.com.conf /etc/nginx/sites-enabled/ 启用站点配置
2. nginx -t 验证配置是否正确
3. systemctl reload nginx 重载Nginx生效

第三步：调整Cloudflare配置 #

删除之前设置的admin子域名重定向规则，保留admin.mysite.com的A记录解析即可。如果开启了Cloudflare的CSP规则，需要在Cloudflare的安全配置中同样放行frame-ancestors规则允许两个域名互相嵌入。

验证修复 #

清除浏览器缓存后访问https://admin.mysite.com，进入后台编辑页面即可正常加载预览区域。

内容的提问来源于stack exchange，提问作者Pranjal Pratap Singh