VPS Nginx反向代理（SSL终止）搭配家庭Nginx WordPress站点的混合内容（MIXED CONTENT）/CSP问题排查求助

大家好，我已经折腾好几天了，还是没搞清楚哪里配置错了，希望各位大佬能帮忙排查下问题！

我的架构是这样的：

• DNS解析指向我的VPS
• VPS上部署了带SSL终止的Nginx反向代理，负责把请求转发到家庭服务器
• 家庭服务器上是无SSL的Nginx，跑着一个WordPress站点（这个站点是另一个域名站点的镜像，目的是引导用户转到新服务器）

现在遇到的问题：一在浏览器输入URL，就看到站点样式破碎，控制台报混合内容和CORS错误。我知道肯定是自己的配置哪里写错了，但就是找不到问题点。

先贴一下我的配置：

VPS上的Nginx反向代理配置 #

server {
    listen 80;
    listen [::]:80;
    server_name mypage.dns;

    # rewrite ^(.*) https://$host$1 permanent;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name     mypage.dns;

    location / {
        add_header X-Served-By $host;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $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 https;
        # proxy_set_header X-Forwarded-Ssl https;
        # proxy_set_header X-Url-Scheme https;
        proxy_set_header X-Forwarded-Port 443;
        proxy_set_header Proxy "";
        proxy_pass         http://172.16.100.100;
        proxy_redirect off;
        # proxy_redirect http://172.16.100.100/ https://$host/;
        # proxy_pass_request_headers      on;
    }

    ssl_certificate /etc/letsencrypt/live/mypage.dns/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mypage.dns/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

家庭服务器上的Nginx配置（之前作为独立站点能正常运行，现在想做镜像） #

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name     mypage.dns;

    keepalive_timeout 10;
    keepalive_disable msie6;
    keepalive_requests 200;

    include snippets/csp.conf;

    location / {
        #add_header X-Forwarded-Proto https;
        gzip on;
        gzip_static on;
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        #add_header X-Forwarded-Proto https;
        include fastcgi_params;
        fastcgi_intercept_errors on;
        gzip on;
        fastcgi_cache MYPAGE;
        fastcgi_cache_valid 200 301 302 10h;
        fastcgi_cache_valid 404 5m;
        fastcgi_cache_bypass $no_cache;
        fastcgi_no_cache $no_cache;
        fastcgi_cache_lock on;
        fastcgi_cache_lock_age 5s;
        fastcgi_cache_lock_timeout 5s;
        fastcgi_cache_use_stale error timeout updating invalid_header http_500 http_503;
        fastcgi_cache_min_uses 1;
        fastcgi_ignore_headers Cache-Control Expires Set-Cookie;
        add_header X-Cache-Status $upstream_cache_status;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_read_timeout 600s;
        fastcgi_pass unix:/var/www/mypage.dns/php/php-mypage.sock;
    }

    location ~* .(webp|avif|webm|ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
        sendfile           on;
        sendfile_max_chunk 1m;
        tcp_nopush on;
        expires max;
        log_not_found off;
        access_log off;
        include snippets/csp.conf;
        add_header Cache-Control public;
        open_file_cache                 max=10000 inactive=12h;
        open_file_cache_valid           5m;
        open_file_cache_min_uses        1;
        open_file_cache_errors          off;
    }
}

snippets/csp.conf内容 #

set $cors_origin "";
set $cors_cred   "";
set $cors_header "";
set $cors_method "";

if ($http_origin ~ '^https?://(mypage\.dns|cdn\.mypage\.dns|otherpage\.dns)$') {
    set $cors_origin $http_origin;
    set $cors_cred   true;
    set $cors_header $http_access_control_request_headers;
    set $cors_method $http_access_control_request_method;
}

add_header Access-Control-Allow-Origin      $cors_origin;
add_header Access-Control-Allow-Credentials $cors_cred;
add_header Access-Control-Allow-Headers     $cors_header;
add_header Access-Control-Allow-Methods     $cors_method;

add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options nosniff;
add_header Referrer-Policy "no-referrer-when-downgrade";

wp-config.php中添加的代码 #

if (isset($_SERVER['HTTP_X_FORWARDED_HOST'])) {
    $_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
}

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO'])) {
    if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
        $_SERVER['HTTPS'] = 'on';
    }
}

define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] );
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] );

我查了各种教程、配置指南，都说只要在反向代理里加对请求头，再在wp-config里加这些代码就可以了，但实际就是不行。我用curl -H 'Pragma: no-cache' https://mypage.dns测试，返回的源码里还是http链接，没有转换成https。

我理解架构是：客户端 ←→ SSL/443 ←→ 反向代理 ←→ HTTP/80 ←→ 家庭Nginx+WordPress，所以WordPress本身收到的是http请求，但按道理wp-config里的$_SERVER['HTTPS'] = 'on'应该能让WordPress识别到外部是HTTPS，从而输出https链接？但不管是加判断逻辑还是直接强制设置$_SERVER['HTTPS'] = 'on'，源码里的链接还是http。

我试过调整两个Nginx的配置、wp-config强制SSL、各种代理参数，也看了StackOverflow上的相关帖子，但都没解决问题。

另外还有个小问题：访问https://mypage.dns/wp-admin/会跳转到原站点的域名，这个应该是数据库里的URL没替换，但现在最头疼的还是混合内容的问题。

补充：打印的$_SERVER结果 #

[USER] => www-data
[HOME] => /var/www
[HTTP_COOKIE] => sockem_cookie=d60e502ce4; _ga_5EEYGXVFRX=GS1.1.1709040937.2.1.1709043327.0.0.0; _ga=GA1.1.1067912476.1709025588; _ga_FW712V8LBG=GS1.1.1709040937.2.1.1709043327.55.0.0; _pk_id.11.90a2=5501b80dee4dc1cf.1709025588.; _pin_unauth=dWlkPU1EVmlZVEJpTmpndE1UZGpZUzAwTlRNNUxUaGpZMkl0TjJNd1ltSm1aak5tWkRNdw; _pk_ses.11.90a2=1
[HTTP_CACHE_CONTROL] => no-cache
[HTTP_PRAGMA] => no-cache
[HTTP_SEC_FETCH_USER] => ?1
[HTTP_SEC_FETCH_SITE] => none
[HTTP_SEC_FETCH_MODE] => navigate
[HTTP_SEC_FETCH_DEST] => document
[HTTP_UPGRADE_INSECURE_REQUESTS] => 1
[HTTP_DNT] => 1
[HTTP_ACCEPT_ENCODING] => gzip, deflate, br
[HTTP_ACCEPT_LANGUAGE] => pl,en-US;q=0.7,en;q=0.3
[HTTP_ACCEPT] => text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
[HTTP_USER_AGENT] => Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
[HTTP_CONNECTION] => close
[HTTP_X_FORWARDED_PORT] => 443
[HTTP_X_FORWARDED_PROTO] => https
[HTTP_X_FORWARDED_FOR] => <HOME_IP>
[HTTP_X_REAL_IP] => <HOME_IP>
[HTTP_X_FORWARDED_HOST] => mypage.dns
[HTTP_HOST] => mypage.dns
[SCRIPT_FILENAME] => /var/www/mypage.dns/web/index.php
[REDIRECT_STATUS] => 200
[SERVER_NAME] => oldmypage.dns
[SERVER_PORT] => 80
[SERVER_ADDR] => 172.16.100.100
[REMOTE_USER] =>
[REMOTE_PORT] => 46954
[REMOTE_ADDR] => 172.16.100.1
[SERVER_SOFTWARE] => nginx/1.22.1
[GATEWAY_INTERFACE] => CGI/1.1
[REQUEST_SCHEME] => http
[SERVER_PROTOCOL] => HTTP/1.0
[DOCUMENT_ROOT] => /var/www/mypage.dns/web
[DOCUMENT_URI] => /index.php
[REQUEST_URI] => /?test=1
[SCRIPT_NAME] => /index.php
[CONTENT_LENGTH] =>
[CONTENT_TYPE] =>
[REQUEST_METHOD] => GET
[QUERY_STRING] => test=1
[FCGI_ROLE] => RESPONDER
[PHP_SELF] => /index.php
[REQUEST_TIME_FLOAT] => 1709043327.0155
[REQUEST_TIME] => 1709043327
[HTTPS] => on

我现在的期望是能让站点通过反向代理正常运行，没有混合内容和CSP错误，麻烦各位帮忙看看哪里出问题了！

备注：内容来源于stack exchange，提问作者Va_ni_tas