Nginx SNI 分流反代后 CSS JS 文件 404 找不到的问题（不完美解决）

2021-10-06 – 1:57 上午 --- 13,717 次阅读

这里试过反代 ifile share，cloudreve，metube 等都出现这个问题，主页面可以显示，表示反代是没有问题的，但是所有 css，js 文件都是 404，界面显示不完全，很奇怪，你说都是静态文件，但 favicon.ico 那些没问题。

原本反代代码，css/js 404 出错：

        location / {
            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 X-Forwarded-Proto $scheme;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:808;
            add_header X-Cache $upstream_cache_status;
            add_header Cache-Control no-cache;
        }

添加以下代码，则正常：

        location ~* \.(gif|png|jpg|css|js|woff|woff2)$ {
            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 X-Forwarded-Proto $scheme;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:808;
            expires 12h;
        }

这里有个问题，如果反代不是在 / 下，而是子目录下，比如 /metube，按照上面的写法就会影响到 / 下主站，导致主站找不到一些资源文件，~~我这里就出现修改后主站找不到 favicon.png 的问题，所以我就只添加 css|js~~ 添加子目录匹配：

        location /metube/ {
            proxy_pass http://127.0.0.1:8081;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
        }

        location ~ ^/metube/.*\.(css|js)$ {
            proxy_pass http://127.0.0.1:8081;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
        }

主站 PHP 脚本都是远程调用 CDN 的 css|js，没有本地的，所以没出问题。至少这样暂时能用。