.htaccess重写URL后window.location.href未变 如何获取重写地址

Apache mod_rewrite默认执行服务器端内部转发：重写逻辑完全在服务端完成，不会向浏览器返回跳转响应，浏览器全程感知不到服务端的路径转换，地址栏、window.location 等客户端API只会返回用户最初访问的原始URL，属于正常表现，并非规则失效。
客户端JS运行在浏览器沙箱中，没有原生API可以直接获取服务端内部转发的目标路径，也完全不需要获取该路径，通过以下方案即可实现需求。

方案1：前端直接解析原始URL（最简单，零额外开销） #

直接从当前页面的路径中拆分提取图片名即可，不需要调整现有重写规则：

// 拆分路径，过滤空值段
const pathParts = window.location.pathname.split('/').filter(Boolean);
// 匹配 /image/xxx 格式路径，第二个分段即为图片名
const imageName = pathParts[1];

这个方案完全适配伪静态URL的设计，不需要改动服务端配置，是此类场景最常用的处理方式。

方案2：优化重写规则，显式传递参数（前后端取值更方便） #

当前编写的重写规则存在小缺陷：拼接query参数时没有指定参数名，后续不管是后端逻辑还是前端读取参数都会很麻烦，可以调整为带明确参数名的写法，记得加上[L]标记终止后续重写流程：

RewriteEngine On
RewriteRule ^image/(\w+)$ image.html?imgName=$1 [NC,L]

注意：这个调整依然属于服务端内部转发，浏览器端还是看不到拼接的query参数，参数是直接传给服务端的image.html脚本的。如果image.html是纯静态页面不需要后端读参数，用方案1就足够；如果需要后端逻辑处理图片名，这个写法可以让后端直接通过查询参数拿到图片名（例如PHP环境下通过$_GET['imgName']取值），再把参数渲染到页面全局变量里供前端使用即可。

不推荐方案：外部重定向 #

如果非要让浏览器地址栏显示重写后的/image.html?ImageName路径，可以在重写标记里加上R（临时重定向）或R=301（永久重定向）：

RewriteRule ^image/(\w+)$ image.html?imgName=$1 [NC,L,R=302]

这种方式会触发浏览器强制跳转，地址栏会发生变更，完全失去伪静态URL的简洁美观性，除非有特殊需求否则不要使用。

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