WordPress配置Nginx反向代理后混合内容错误解决咨询

核心原因 #

WordPress未识别到前端的HTTPS请求，仍以HTTP协议输出静态资源、链接，导致浏览器触发「混合内容」拦截错误。

解决步骤 #

• 修改WordPress站点URL配置
  两种方式二选一：

  1. 后台操作：登录WordPress后台，进入「设置」→「常规」，将「WordPress地址（URL）」和「站点地址（URL）」全部改为https://example.com。
  2. 直接修改配置文件：在WordPress根目录的wp-config.php中添加以下代码：

     define('WP_HOME','https://example.com');
     define('WP_SITEURL','https://example.com');
     

• 配置Apache识别反向代理的HTTPS请求
  在Apache的站点配置文件（或.htaccess）中添加规则，让Apache知晓原始请求为HTTPS：

  # 方式1：站点配置中添加
  SetEnvIf X-Forwarded-Proto "https" HTTPS=on
  
  # 方式2：.htaccess中添加
  RewriteEngine On
  RewriteCond %{HTTP:X-Forwarded-Proto} !https
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
  

• 修复现有内容中的HTTP硬编码链接
  如果之前发布的文章、附件中存在硬编码的HTTP链接，需批量替换（操作前请备份数据库）：

  -- 替换文章内容中的HTTP链接
  UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
  -- 替换自定义字段中的HTTP链接
  UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'http://example.com', 'https://example.com');
  

• 确保Nginx反向代理传递HTTPS协议头
  在Nginx的server块配置中，添加转发头，将HTTPS协议信息传递给Apache：

  location / {
      proxy_pass http://127.0.0.1:8080;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme; # 关键：传递原始请求的协议（HTTPS）
  }
  

内容的提问来源于stack exchange，提问作者whitebear