反向代理托管HTML关联资源时出现404的问题解决咨询

嗨，我来帮你捋捋这个问题~

你遇到的情况很典型：页面能正常加载，但关联的CSS（或者JS、图片这类静态资源）报404，核心原因是浏览器解析资源路径的逻辑和你预期的不一样。

咱们先拆解下问题：你的Nginx配置把example.net/listing代理到了http://127.0.0.1:61185/（注意proxy_pass末尾的斜杠，它会把/listing替换成后端的根路径/）。但HTML里的CSS引用应该是写了绝对路径（比如<link href="/styling.css">），这时候浏览器会认为这个资源在网站根目录下，直接请求example.net/styling.css——可你的Nginx只配置了/listing路径的代理，根目录下的这个请求自然找不到对应的后端服务，就返回404了。

下面给你几个实用的解决方案，你可以根据自己的情况选：

方案1：修改HTML里的资源引用（最简单直接） #

把HTML中静态资源的绝对路径改成相对路径，或者加上/listing前缀：

• 如果原本是<link href="/styling.css">，可以改成<link href="styling.css">（相对路径，浏览器会自动以当前页面路径/listing为基准，请求/listing/styling.css，这个路径会被Nginx代理到后端的/styling.css）
• 或者直接写全路径<link href="/listing/styling.css">，这样浏览器会直接请求正确的代理路径

方案2：用HTML的<base>标签统一设置基准路径 #

如果页面里有很多静态资源，一个个改太麻烦，可以在HTML的<head>标签里加一行代码，统一指定所有相对路径资源的基准URL：

<base href="/listing/">

这样不管页面里的资源写的是styling.css还是images/logo.png，浏览器都会自动拼接成/listing/styling.css、/listing/images/logo.png来请求，完美适配你的代理配置。

方案3：修改Nginx配置，代理根目录下的静态资源 #

如果不方便修改后端的HTML代码，可以在Nginx配置里加一个专门匹配静态资源的规则，把根目录下的CSS、JS等资源也代理到后端：

server {
    listen 80;
    server_name example.net;

    location /listing {
        proxy_pass http://127.0.0.1:61185/;
    }

    # 匹配根目录下的css、js文件，代理到后端
    location ~* \.(css|js|png|jpg)$ {
        proxy_pass http://127.0.0.1:61185;
    }
}

不过要注意：这个规则会匹配所有根目录下的这类静态资源，如果你的网站根目录下还有其他独立服务的资源，可能会冲突，所以这个方案更适合你的网站根目录只有这个代理服务的场景。

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