Nginx+Docker部署WordPress负载均衡HTTPS页面样式不加载问题

问题原因 #

你遇到的HTTPS站点样式丢失是典型的WordPress混合内容加载错误：

• Nginx作为反向代理处理了HTTPS请求，但转发给后端WordPress容器时使用的是HTTP协议
• WordPress未感知到前端实际是HTTPS访问，输出的静态资源（CSS、JS、图片）链接全部为HTTP开头
• 浏览器的安全策略会拦截HTTPS页面下的HTTP资源请求，导致样式无法正常渲染

具体解决方案 #

分三个步骤操作即可修复：

第一步：修改Nginx配置 #

更新你的nginx.conf的location /块，添加转发协议和端口相关的请求头，同时修正IP获取参数：

location / {
    proxy_pass         http://all;
    proxy_set_header Host            $host;
    # 修正IP获取参数，未启用proxy protocol时使用$remote_addr
    proxy_set_header X-Real-IP       $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    # 新增：告知WordPress前端访问的协议和端口
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Port  $server_port;
}

第二步：修改WordPress配置 #

编辑WordPress根目录下的wp-config.php文件，在/* That's all, stop editing! Happy publishing. */标记之前添加以下代码：

// 信任反向代理转发的HTTPS标识
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
    $_SERVER['SERVER_PORT'] = 443;
}
// 固定站点地址为HTTPS，避免数据库中存储的HTTP地址影响
define( 'WP_HOME', 'https://wordpress-docker.test' );
define( 'WP_SITEURL', 'https://wordpress-docker.test' );

如果站点已发布过内容，数据库中仍残留旧的HTTP资源链接，可以进入WordPress后台使用搜索替换工具批量更新，避免单篇内容仍出现混合内容错误。

第三步：重启服务生效 #

执行以下命令重启相关容器：

docker compose restart nginx wordpress-1 wordpress-2

重启完成后清空浏览器缓存和WordPress站点缓存，再次访问HTTPS站点即可正常加载样式。

内容的提问来源于stack exchange，提问作者Wellington dos Santos Ramos