Nginx反向代理配置异常：访问/dev路径时无法加载JS与CSS资源

兄弟，我一眼就瞅出问题所在了——你的Nginx代理配置没处理好静态资源的路径前缀，导致浏览器加载JS/CSS时直接请求了网站根目录，而不是/dev路径下的代理资源！

问题根源分析 #

当你访问exemple.com/dev时，Nginx把请求代理到了dev服务器，成功返回了index.html。但dev服务器返回的index.html里，JS和CSS的引用大概率是根路径相对地址（比如/main.bundle.js），浏览器看到这个路径后，会直接请求exemple.com/main.bundle.js（prod服务器的根目录），而不是代理到dev服务器的/main.bundle.js，自然就加载不到资源了。

解决方案：调整Prod服务器的Nginx配置 #

你需要修改prod服务器上/dev的location配置，确保静态资源的请求路径能正确被代理到dev服务器，同时让浏览器知道要从/dev路径下加载资源。

修改后的location /dev块如下：

location /dev/ {
    proxy_pass http://10.10.38.18/;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    # 告诉dev服务器的应用，当前请求的前缀是/dev（如果你的应用支持识别这个头的话）
    proxy_set_header X-Forwarded-Prefix "/dev";
    # 替换index.html里的base标签，强制浏览器以/dev/为基础路径加载资源
    sub_filter '<base href="/">' '<base href="/dev/">';
    sub_filter_once on;
}

关键修改点说明 #

1. 路径末尾的斜杠：把location /dev改成location /dev/，同时proxy_pass末尾也加上/。这样Nginx会把/dev/后面的所有路径部分，完整追加到代理地址后面。比如请求/dev/main.bundle.js时，会代理到http://10.10.38.18/main.bundle.js，正好匹配dev服务器上的资源路径。
2. X-Forwarded-Prefix头：如果你的Web应用（比如React、Vue）支持配置publicPath，可以让应用读取这个请求头，自动生成带/dev前缀的资源链接，从根源上避免路径问题。
3. sub_filter替换base标签：如果应用没法修改配置，用sub_filter直接替换index.html里的<base>标签，强制浏览器所有相对路径都基于/dev/来请求，这样JS/CSS的请求地址就会变成exemple.com/dev/main.bundle.js，被Nginx正确代理到dev服务器。

额外检查 #

确认dev服务器的Nginx配置正常，直接访问http://10.10.38.18/main.bundle.js能正常返回资源，确保dev服务器本身的静态资源服务没有问题。

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