• 2024.06.13 更新 WordPress 反代后 CSS、JS 和 PNG 报 mixed content 错误
    当遇到 WordPress 反代后 CSS、JS 和 PNG 等资源无法加载，报 mixed content 错误时，这通常意味着网站中同时存在 HTTP 和 HTTPS 两种协议的请求。这种情况在博客主题内容使用 CDN 进行分发时尤为常见。

CDN 的基本概念

CDN 的作用：CDN（内容分发网络）是一种分布式的网络服务，它通过在多个地理位置分布的服务器上存储网站的静态文件（如 CSS、JS、图片等），来加快网站的访问速度。
CDN 与 HTTPS：当网站启用 HTTPS 加密协议后，如果 CDN 没有正确配置支持 HTTPS，就会导致资源加载时的 mixed content 问题。

强制 HTTPS 的重要性

数据安全：强制 HTTPS 可以确保用户与网站之间传输的数据不被截获和篡改，提高数据传输的安全性。
搜索引擎优化：搜索引擎，如 Google 和百度，更倾向于对启用 HTTPS 的网站给予更好的排名。

CDN 配置的关键点

HTTP 回源问题：如果 CDN 配置为 HTTP 回源，而网站的其他部分已经使用了 HTTPS，就会导致协议不一致的问题。解决这个问题需要在 CDN 设置中选择 HTTPS 回源。
缓存问题：CDN 可能会缓存 301 重定向响应，导致即使设置了 HTTP 到 HTTPS 的跳转，用户仍可能访问到 HTTP 版本的页面。这需要通过在页面中加入 JavaScript 代码来实现客户端的自动跳转。

具体解决方案

选择支持 HTTPS 的 CDN：选择一个支持 HTTPS 的 CDN 服务商，如腾讯云 CDN 或 VeryCloud，并确保正确配置 SSL 证书。
配置 Nginx 规则：对于不支持 HTTPS 的请求，可以通过配置 Nginx 规则来实现重定向。例如，对于非 POST 请求，可以强制重定向到 HTTPS 版本。

下面将详细解释这个问题的原因及解决方案，可以尝试配置 Nginx 规则在反向代理配置中加入以下代码：

proxy_set_header X-Forwarded-Proto https;
proxy_redirect http:// https://;

这两行代码的作用是：

proxy_set_header X-Forwarded-Proto https;：这行代码告诉后端服务器，客户端使用的真实协议是 HTTPS。这样，后端服务器就可以根据这个信息来生成正确的 URL，确保资源请求也是通过 HTTPS 协议发送的。

proxy_redirect http:// https://;：这行代码的作用是在反向代理收到后端服务器发回的 HTTP 响应内容时，直接将其中的 HTTP URL 重定向为 HTTPS URL，然后再发回给用户。这样可以确保用户最终获取到的资源也是通过 HTTPS 协议加载的，避免了 mixed content 错误。

这两种方法可以单独使用，也可以结合使用。如果使用了 CDN，可以直接强制 HTTPS，或者启用 HSTS（HTTP Strict Transport Security），或者对资源 URL 进行重写，都可以解决 mixed content 问题。这种问题通常是因为没有使用 CDN 直接反代服务器导致的。

nginx 将域名反代到端口后 css、js、图片等样式不加载的问题

宝塔创建网页后，将域名 (http://chevereto.leiting2020.top/) 反代到 4000 端口，通过在配置文件中添加一下代码实现反代到4000端口，通过在配置文件中添加一下代码实现)

location / {
  proxy_pass http://127.0.0.1:4000/;
}

使用 nginx 的反向代理后，发现页面能正常跳转，可是 css、js 和相关的图片就是不出来，如下图

202305071823320

打开 F12 开发者模式，发现反代报错

image-20230507152221523

在配置中加上以下代码

location ~ .*\.(js|css)?$
{
    expires      12h;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:4000;#4000可改为你自己起服务器本地服务的端口
    error_log /dev/null;
    access_log /dev/null;
}
 
location / {
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://127.0.0.1:4000/;#4000可改为你自己起服务器本地服务的端口
}

重启 nginx 服务，页面正常了。