PHP项目中Blog页面路径参数导致资源相对路径加载异常

问题原因 #

当URL是http://localhost/blog/1时，浏览器会将blog/1判定为一个目录层级，此时相对路径./assets/js/scripts.js会基于这个目录解析，最终变成http://localhost/blog/assets/js/scripts.js；而查询参数形式http://localhost/blog?id=1的路径层级仍为根目录下的blog文件，所以相对路径解析正常。

解决方案 #

• 改用根绝对路径：把资源路径改成以斜杠开头的绝对路径，直接指向网站根目录的资源：

  <script src="/assets/js/scripts.js"></script>
  

  无论当前URL层级如何，都会请求http://localhost/assets/js/scripts.js。

• 设置<base>基准标签：在页面的<head>区域添加<base>标签，统一指定所有相对路径的基准地址：

  <head>
    <base href="/">
    <!-- 其他头部内容 -->
  </head>
  

  之后所有相对路径都会以/（网站根目录）为起点解析，无需逐个修改资源路径。

• 调整URL重写规则：如果用了Apache或Nginx做URL重写，确保重写规则不会让浏览器误判路径层级。比如Apache的.htaccess配置：

  RewriteEngine On
  RewriteRule ^blog/(\d+)$ blog.php?id=$1 [L]
  

  这条规则会把blog/1内部转发到blog.php?id=1，同时浏览器不会将blog/1识别为目录，相对路径就能正常解析。

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