主应用代理子应用后浏览器错误解析相对URL的解决咨询

这个问题其实是浏览器对相对路径的解析逻辑导致的，咱们一步步拆解清楚：

问题根源 #

当用户访问www.xxx.com/page（没有末尾斜杠）时，浏览器会默认把page当成一个文件名，而非目录。这时候页面里的相对路径main.1234.js就会被解析到上一级目录——也就是网站根目录www.xxx.com/，完全偏离了你预期的www.xxx.com/page/路径。

而直接访问app#2的www.xxx.com:82/page时能正常解析，大概率是因为app#2在处理这个路由时，会自动把请求重定向到带斜杠的www.xxx.com:82/page/，或者页面里已经隐含了正确的基础路径配置，让浏览器认定page是个目录。

具体解决方法 #

方法1：添加<base>标签（最直接高效） #

在代理返回的HTML页面的<head>部分，插入一个<base>标签，明确指定所有相对资源的基础路径：

<base href="/page/">

这样浏览器就会把所有相对路径（比如main.1234.js）都解析为/page/main.1234.js，也就是www.xxx.com/page/main.1234.js，完全符合你的预期。
你可以在app#1的代理逻辑中，在返回HTML内容前做字符串替换，找到<head>标签后插入这段代码即可。

方法2：修改资源路径为带前缀的绝对路径 #

如果不想依赖<base>标签，可以把页面里的脚本路径改成带/page/前缀的绝对路径：

<script type="text/javascript" src="/page/main.1234.js"></script>

要是不想改动app#2的代码，也可以让app#1在代理转发时自动替换页面中的相对路径——用正则表达式匹配所有相对资源的src/href属性，统一添加/page/前缀。

方法3：调整路由重定向 #

让app#1把www.xxx.com/page的请求重定向到www.xxx.com/page/（末尾加斜杠）。这样浏览器地址栏会显示带斜杠的URL，此时浏览器会默认认定page是一个目录，相对路径自然就会解析到该目录下。
比如在app#1的路由配置中加一条规则：当请求路径是/page且无末尾斜杠时，返回301重定向到/page/，再代理这个带斜杠的请求到app#2。

额外说明 #

对比两种场景的响应头，其实核心差异不在响应头本身，而是浏览器对当前URL的解析逻辑。不过如果app#2返回的页面带有Last-Modified或ETag这类缓存头，代理时尽量保留这些字段，避免不必要的缓存问题，但这不是导致路径解析错误的直接原因。

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