Nginx URL版本控制问题：相对路径资源加载异常求助

这个问题的核心是浏览器解析相对路径的基准URL变了：当用户访问myservice.server.com/v1时，浏览器会把当前页面的基准路径认定为/v1/，所以页面里的相对路径（比如scripts/myscript.js）会被解析成/v1/scripts/myscript.js，但你的静态资源大概率还是存放在根目录对应的文件系统路径下，这就导致Nginx找不到资源返回404。

下面给你几个可行的解决方案：

方案1：在HTML页面添加<base>标签（最简单直接） #

在页面的<head>里加上<base>标签，强制所有相对路径都基于网站根目录：

<head>
  <base href="/">
</head>

这样不管用户访问的是/v1还是未来的/v2，页面里的相对路径都会被解析成/scripts/myscript.js，直接指向根目录下的资源，从根源上解决路径解析问题。

方案2：调整Nginx配置，转发版本路径下的静态资源请求 #

如果不想修改页面代码，可以在Nginx里配置规则，把/v1/开头的静态资源请求转发到实际的资源目录。假设你的静态资源存放在/usr/share/nginx/html下，可以这样调整配置：

首先保留你原来的location规则，然后新增一个专门处理静态资源的location：

# 匹配版本路径下的静态资源请求
location ~ "^/(v\d+)/(scripts|styles|images)/(.*)$" {
  root /usr/share/nginx/html;
  # 把/v1/scripts/xxx转发到/scripts/xxx
  rewrite ^/(v\d+)/(.*)$ /$2 break;
}

# 你原来的业务逻辑location
location ~ "^/(?<version>v\d+)?(/.*)" {
  # 这里写你的业务转发逻辑，比如proxy_pass到后端服务
  proxy_pass http://your-backend-service;
}

或者也可以直接在原location里用alias来调整路径，但要注意alias和root的区别：

location ~ "^/(?<version>v\d+)?(/.*)" {
  # 如果是静态资源请求，用alias指向实际目录
  if ($uri ~* "\.(js|css|png|jpg)$") {
    alias /usr/share/nginx/html$2;
  }
  # 业务请求转发到后端
  proxy_pass http://your-backend-service;
}

不过尽量避免在Nginx里用if，所以更推荐单独写静态资源的location规则。

方案3：修改后端服务的资源引用路径（不推荐） #

把页面里的所有相对路径改成绝对路径，比如/scripts/myscript.js，但这种方式需要修改大量代码，后续维护成本高，除非是小项目否则不建议。

内容的提问来源于stack exchange，提问作者Jay