如何在HTML场景下让URL末尾始终带斜杠以解决CSS/JS加载问题

你遇到的资源加载失败本质是浏览器的相对路径解析规则导致的：当页面地址为https://domain.name/example时，浏览器会把example识别为文件名，此时页面内的相对路径资源会从上层目录https://domain.name/开始解析；如果地址是https://domain.name/example/，example会被识别为目录，相对路径从该目录下解析，这就是两种地址表现不一致的原因。

1. 服务端301重定向（最优方案） #

该方案对SEO友好，也能从根源统一URL格式，不同服务端的配置如下：

• Nginx 配置：在对应的server配置块中添加以下规则

# 匹配无后缀且末尾无斜杠的路径，重定向到带斜杠的版本
rewrite ^([^.]*[^/])$ $1/ permanent;

• Apache 配置：在站点根目录的.htaccess文件中添加以下规则

RewriteEngine On
# 排除实际存在的静态文件
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*[^/])$ /$1/ [L,R=301]

• Express 等Node.js服务配置：添加全局中间件处理

app.use((req, res, next) => {
  // 排除带后缀的静态文件请求
  if (req.path.slice(-1) !== '/' && !req.path.includes('.')) {
    res.redirect(301, `${req.path}/${req.search}`)
  } else {
    next()
  }
})

2. 前端临时兜底方案 #

如果暂时无法修改服务端配置，可以用以下方案快速修复：

• 在页面<head>标签的最顶部添加base标签，固定相对路径的解析基准

<base href="https://domain.name/example/" />

• 用JS做路径判断，不满足条件时自动跳转

// 排除带后缀的静态资源请求
if (!window.location.pathname.endsWith('/') && !window.location.pathname.match(/\.[a-zA-Z0-9]+$/)) {
  window.location.replace(`${window.location.pathname}/${window.location.search}${window.location.hash}`)
}

3. 开发阶段规避方案 #

写代码时直接使用绝对路径引用静态资源，例如用/example/static/style.css替代./static/style.css，从根源避免相对路径解析错误的问题。

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