标签在nginx多级代理中易失效致404，根本原因是base href值、proxy_pass路径拼接、浏览器解析规则及前端构建路径未对齐；href必须以http://、https://、//或/开头且根相对路径以/结尾，否则被静默丢弃。
<base> 标签在 Nginx 多级代理场景下极易失效或引发 404，根本原因不是配置没写，而是它和 proxy_pass 的路径拼接逻辑、浏览器解析规则、前端构建路径三者没对齐——单独调任何一个都白搭。
base href 值必须严格满足浏览器校验，否则静默丢弃
浏览器只认以 http://、https://、// 或 / 开头的 href 值，且根相对路径必须以 / 结尾。任何偏差都会导致整个 <base> 被跳过，后续所有 <img src="logo.png"> 都按当前页面 URL 解析，上线即 404。
-
href="static/"、href="../assets"、href="%PUBLIC_URL%/"→ 全部无效，不报错但不起作用 -
href="/myapp"→ Firefox/Opera 会截断成/myappcss/app.css，必须写成/myapp/ - 生产环境推荐绝对 URL：
href="https://cdn.example.com/v3/"，避免协议、域名、版本歧义 - 本地开发可写
href="http://localhost:3000/"，比/更安全，防与后端路由冲突
Nginx proxy_pass 末尾斜杠决定 base 是否“有机会生效”
如果 proxy_pass 拼错了路径，浏览器压根收不到正确的 <base href="/myapp/">，或者收到时上下文路径已错位。典型表现是 HTML 能加载，但 script 和 link 的 src/href 仍 404。
-
location /myapp/ { proxy_pass http://backend/; }→ 后端收到/v1/user，HTML 中<base href="/myapp/">才有意义 -
location /myapp/ { proxy_pass http://backend; }→ 后端收到/myapp/v1/user，此时 HTML 若写<base href="/myapp/">，资源请求会变成/myapp/myapp/js/app.js，双倍前缀 - 若代理链含多级（如 CDN → Nginx → 后端），必须确保每层都透传
X-Forwarded-Prefix或用sub_filter动态重写<base href="...">中的值
base 只影响 HTML 解析阶段，JS/CSS 运行时路径完全不受控
很多人以为写了 <base href="/myapp/"> 就一劳永逸，结果 fetch('./api/user') 404、import('./utils.js') 报错、CSS @import "reset.css" 加载失败——这些根本绕过 <base>。
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、CSS 中background: url(avatar.jpg) - ❌ 完全不受影响：
fetch()、import()、new Worker()、@import、<iframe src="/admin/>%EF%BC%88%E6%A0%B9%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E7%9B%B4%E6%8E%A5%E6%8B%BC%20origin%EF%BC%89 %0A - %E2%9A%A0%EF%B8%8F%20%E5%8D%8A%E5%8F%97%E5%BD%B1%E5%93%8D%EF%BC%9A
document.baseURI%20%E5%8F%AF%E8%AF%BB%EF%BC%8C%E4%BD%86%20window.location%20%E4%B8%8D%E5%8F%98%EF%BC%9BSPA%20%E8%B7%AF%E7%94%B1%EF%BC%88Vue%20Router%20/%20React%20Router%20v6+%EF%BC%89%E5%BF%85%E9%A1%BB%E6%98%BE%E5%BC%8F%E9%85%8D%20base%20%E5%8F%82%E6%95%B0%EF%BC%8C%E4%B8%8D%E8%AF%BB%20document.baseURI%0A
%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E3%80%81Nginx%E3%80%81HTML%20base%20%E4%B8%89%E8%80%85%E5%80%BC%E5%BF%85%E9%A1%BB%E5%94%AF%E4%B8%80%E4%B8%94%E4%B8%80%E8%87%B4%EF%BC%8C%E5%90%A6%E5%88%99%E8%B7%AF%E5%BE%84%E8%A2%AB%E6%8B%BC%E4%B8%A4%E6%AC%A1
%0AWebpack%20%E7%9A%84%20publicPath%E3%80%81Vite%20%E7%9A%84%20base%E3%80%81Nginx%20%E7%9A%84%20root%20%E6%88%96%20alias%E3%80%81HTML%20%E4%B8%AD%E7%9A%84%20<base%20href>%EF%BC%8C%E5%8F%AA%E8%A6%81%E5%85%B6%E4%B8%AD%E4%B8%A4%E4%B8%AA%E5%80%BC%E7%9B%B8%E5%90%8C%E4%B8%94%E5%90%8C%E6%97%B6%E5%90%AF%E7%94%A8%EF%BC%8C%E5%B0%B1%E5%A4%A7%E6%A6%82%E7%8E%87%E5%87%BA%E7%8E%B0%20/myapp//myapp/js/app.js%20%E8%BF%99%E7%B1%BB%E5%8F%8C%E6%96%9C%E6%9D%A0%E8%B7%AF%E5%BE%84%E3%80%82
- %0A
- Vite%20%E5%B7%B2%E8%AE%BE%20
base:%20'/myapp/'%20%E2%86%92%20HTML%20%E4%B8%AD%E5%B0%B1%E4%B8%8D%E8%AF%A5%E5%86%8D%E6%89%8B%E5%8A%A8%E5%8A%A0%20<base%20href="></iframe> - Webpack
publicPath: '/myapp/'+ HTML<base href="/myapp/">→ chunk 脚本路径被拼两次 - Nginx
location /myapp/ { alias /opt/dist/; }→alias结尾必须带/，否则/myapp/index.html会找成/opt/distindex.html - SPA 部署时，
try_files $uri $uri/ /myapp/index.html;中的/myapp/index.html必须和<base href>前缀一致，否则刷新页面 404
最易被忽略的一点：所有路径对齐必须在构建时固化，不能靠运行时 JS 插入 <base> 或靠 Nginx sub_filter 动态替换——后者在 HTTPS 或 gzip 压缩后基本失效，且无法覆盖 JS 中硬编码的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
