无法通过 SSL 上的 Proxy_Pass 加载静态 (JS/CSS) 文件

Question

我必须 docker 实例，其中包含我的 Wordpress 安装，由 NGINX、PHP7.1 (PHP-FPM)、MariaDD 和 Memcache 容器组成。它们连接到一个 NGINX 容器，该容器为外部世界提供流量服务。

一切都可以通过 HTTP 找到。当我切换到 HTTPS 时，我遇到了几个问题。我已经解决了其中的一些问题，但我相信我还有一个问题是无法加载到 JS/CSS 文件。

这是我的 Wordpress 容器上的 Nginx 配置

server {
  listen 0.0.0.0:80;
  error_log /var/log/nginx/localhost.error.log;
  access_log /var/log/nginx/localhost.access.log;

  root /app/web;
  index index.php index.html index.htm;

  location / {
    try_files $uri $uri/ /index.php?$args;
  }

  location ~ \.php$ {
    try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/var/run/php-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    fastcgi_index index.php;
    include fastcgi_params;
  }
}

这是我的 Nginx 容器上的 Nginx 配置（执行 reverse_proxy 的那个）

server {
  listen 443 ssl http2;
  listen [::]:433 ssl http2;
  server_name www.example.com;

  ssl_certificate /etc/nginx/certs/live/www.example.com/fullchain.pem;
  ssl_certificate_key /etc/nginx/certs/live/www.example.com/privkey.pem;
  ssl_dhparam /etc/nginx/ssl/dhparam.pem;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers HIGH:!aNULL:!MD5;
  
  sendfile off;
  error_log /dev/stdout info;
  access_log /dev/stdout;

  location / {
    proxy_pass http://example-wordpress;
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Port 443;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Real-IP  $remote_addr;
    
    proxy_set_header   SSL_PROTOCOL $ssl_protocol;
    proxy_set_header   SSL_CLIENT_CERT $ssl_client_cert;
    proxy_set_header   SSL_CLIENT_VERIFY $ssl_client_verify;
    proxy_set_header   SSL_SERVER_S_DN $ssl_client_s_dn;
  }

  location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
    expires 5d;
  }

  # deny access to . files, for security
  #
  location ~ /\. {
      log_not_found off; 
      deny all;
  }


  location ^~ /.well-known {
    allow all;
    auth_basic off;
  }

}

这是我在 wp-config.php 上所做的

if (
    (!empty( $_SERVER['HTTP_X_FORWARDED_HOST'])) ||
    (!empty( $_SERVER['HTTP_X_FORWARDED_FOR'])) )
{

  $_SERVER['HTTPS'] = 'on';
}

当我进入管理员端时，此配置设法修复重定向循环。但它不会加载一些 css 和 JS 文件。

当我检查链接时，它会将我定向到 404 页面。我在我的机器上旋转我的本地实例以查看链接是否以某种方式更改。但是比较起来，域是一样的。

https://www.example.com/app/themes/theme-v1.2/build/main.bundle.js?ver=1.0.0
http://www.example.local/app/themes/theme-v1.2/build/main.bundle.js?ver=1.0.0

我花了一天时间解决这个问题，但我似乎不知道还有什么可以完成最后一部分。我希望这里有人可以帮助我，因为它似乎是一个 nginx 问题。

我也会加入这个link，因为这帮助我解决了重定向问题。

总结

• 我正在运行 2 个码头工人。一种是 wordpress 一个 NGINX 和一个 NGINX 容器，为其他容器提供出站流量。
• 我正在使用proxy_pass 将我的流量从www.domain.com 转发到我的wordpress 容器的nginx 实例。
• 它在 HTTP 上运行良好。当我切换 HTTPS 时，一切都不起作用。
• 我设法修复了管理员上的重定向循环。但是 JS 和 CSS 等静态文件无法加载。

Answer 1

将此代码放入 wp-config 中

define('FORCE_SSL_LOGIN', false);
define('FORCE_SSL_ADMIN', false);
define( 'CONCATENATE_SCRIPTS', false );
define( 'SCRIPT_DEBUG', true );