开启 Nginx 反代理后，CSS、JS无法加载解决方案

最近因为不想用宝塔面板，所以把服务器系统重装了，基于 LNMP 的架构重新安装了环境，但是遇到的问题还真不少，但服务基本全部恢复。

CSS、JS 资源无法加载

服务器重装后恢复 Lsky 图床，为了方便后续操作，使用了 docker compose 部署图床，部署完毕后发现一个问题，反代并配置 SSL 后 CSS 和 Js 样式无法加载，但是使用服务器 IP + port 是可以正常访问。

问题排查

打开控制台，发现有一以下报错信息，就是反代理是通过 SSL 访问的，但是资源引用走的是 http 协议，所以资源加载被阻止，就出现了这样的问题。

Mixed Content: The page at ‘https://img.waistu.com/login‘ was loaded over HTTPS, but requested an insecure stylesheet ‘http://img.waistu.com/css/fontawesome.css‘. This request has been blocked; the content must be served over HTTPS.

解决方案

接下来，只需要找到当前站点的 Nginx 配置文件，并添加以下参数，对 JS、CSS 文件的引用做单独说明，这样就可以解决反代理资源加载失败的问题。

Nginx 原配置：

location ^~ / {
    proxy_pass http://127.0.0.1:8089; 
    proxy_set_header Host $host; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header REMOTE-HOST $remote_addr; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    proxy_http_version 1.1; 
    add_header Cache-Control no-cache; 
}

在下方添加如下参数：

# !!!--用于解决js css等资源无法加载的问题--!!!
location ~ .*\.(js|css|jpg|gif|png|bmp|jpeg|svg)$ {
    proxy_pass http://127.0.0.1:8089; 
}
<br>

最终完整的 Nginx 配置：
location ^~ / {
    proxy_pass http://127.0.0.1:8089; 
    proxy_set_header Host $host; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header REMOTE-HOST $remote_addr; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    proxy_http_version 1.1; 
    add_header Cache-Control no-cache; 
}
# !!!--用于解决js css等资源无法加载的问题--!!!
location ~ .*\.(js|css|jpg|gif|png|bmp|jpeg|svg)$ {
    proxy_pass http://127.0.0.1:8089; 
}
```

<br>

最后说明下，配置里的端口根据实际反代理修改即可。