☰

使用 Nginx 代理管理器设置反向代理后，源站点静态资源无法正确加载

tag-icon • tag-icon nginx docker wordpress nginx-reverse-proxy
使用 Nginx 代理管理器设置反向代理后，源站点静态资源无法正确加载

我使用 Docker 创建了 Nginx Proxy Manager 容器和 Wordpress 容器。但是当我像往常一样为 Wordpress 容器（不是 Wordpress）设置反向代理时，我意识到 Nginx 无法正确代理源站点（这是 Wordpress 容器提供的服务）的静态内容（例如 JS、CSS、图像）。

浏览器的开发者工具（F12）提示如下： Mixed Content: The page at 'https://myDomain/wp-admin/setup-config.php' was loaded over HTTPS, but requested an insecure script 'http://myDomain/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.0'. This request has been blocked; the content must be served over HTTPS.

需要注意的是，我的Wordpress容器没有提供HTTPS服务，所以实际上是Nginx代理管理器提供的Nginx服务通过运行HTTPS服务本身来反向代理Wordpress容器提供的HTTP服务。

经过搜索，我在Nginx Proxy Manager中对应的Proxy Host里面的Advanced Options中添加了如下代码：

自定义 Nginx 配置

location / {
     proxy_set_header X-Forwarded-Proto  $scheme; 
}

这看起来确实有点用处，至少可以加载图片和其他东西。但问题是它加载的根本不是 Wordpress，而是 OpenResty 欢迎页面。

我不知道问题是什么，我真诚地希望你能帮助我，如果你想获得更多信息来解决问题，请告诉我，谢谢。

笔记：

我使用了以下容器镜像：

jc21/nginx-proxy-manager:latest

wordpress:latest

答案1

问题是 wordpress 不知道它正在通过 HTTPS 访问，因此它写入包含以下内容的 html（例如）

<img src="http://yoursite/wp-content/picture.png">

您可能需要进一步调查这一点；核心 Wordpress 可能正在使用更为合理的相对路径……src="/wp-content/picture.png"但插件的质量差异很大。

将其添加到您的 wp-config.php 中应该修复大部分代码....

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && 
   strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
    $_SERVER['HTTPS'] = 'on';
}

（还假设你的 nginx 配置为添加标头）。

相关内容