URI查询参数含空格或中文时资源404，因浏览器将未编码字符当作URL分隔符截断路径；<base>设置错误导致相对路径解析错乱；服务端返回HTML冒充JS/CSS引发语法错误；file://协议下特殊字符被浏览器直接拦截。
URI查询参数含空格或中文时资源404
浏览器把未编码的空格、中文、&、= 当作 URL 分隔符，直接截断请求路径——比如 src="js/app.js?q=你好 world" 会被解析成 js/app.js?q=你好，后半截丢弃，服务器自然返回 404。
常见场景：动态拼接 <script> 或 <link> 的 src/href 属性时，直接用字符串拼接用户输入或变量，没做 encodeURIComponent()。
- 检查 Network 面板里失败请求的
Request URL，看是否有空格、中文或%编码不完整（如只出现%E4却没后续字节） - 服务端日志若显示路径被截断（如只收到
/static/css/main.css?theme=dark，但实际传了?theme=dark&v=2），基本就是&未编码 - 前端拼接时，对每个查询参数值单独编码：
src="data.js?name=" + encodeURIComponent(name) + "&id=" + encodeURIComponent(id) - 避免对整个 URL 字符串重复编码：
encodeURIComponent("data.js?name=张三")会把?和=也编码，导致无效 URL
HTML中<base>与相对路径共同引发的URI解析错乱
<base href="/app/"> 会影响所有相对路径的解析起点，但如果页面本身通过嵌套路由访问（如 http://localhost:3000/admin/users/edit），而 <base> 指向错误根路径，浏览器就会把 css/style.css 解析成 /app/css/style.css，而非你部署时的实际位置。
典型表现：首页能加载资源，二级页面全 404；或者本地开发正常，部署到子目录后资源全部失效。
立即学习“前端免费学习笔记（深入）”；
- 确认
<base>的href值是否与实际部署路径一致（结尾必须带/，如/my-project/） - 如果不用
<base>，统一改用以/开头的绝对路径：src="/js/main.js"，而不是src="js/main.js" - Vue CLI / Vite 构建项目需同步配置
publicPath或base，否则<base>和构建工具生成的路径会冲突 - 在 Elements 面板里右键点击
<link>或<script>标签，选 “Copy link address”，粘贴出来看浏览器最终解析出的完整 URL 是否合理
Tomcat 或 Nginx 返回的 HTML 页面被当作 JS/CSS 加载
当 src="/js/app.js" 实际返回的是 404 HTML 页面（比如 Tomcat 默认的 error page），浏览器控制台会报 Uncaught SyntaxError: Unexpected token '<'——因为 JS 引擎试图解析 HTML 的 <!DOCTYPE html> 开头。
这根本不是语法错，而是资源路径错 + 服务端兜底机制共同导致的“假错误”。
- 打开 Network 面板，筛选
JS或CSS类型，点开红色请求，看 Response 内容是不是 HTML 源码（搜索<html或<title>） - Tomcat 下检查
webapps/目录结构是否与路径匹配，例如请求/static/js/app.js，文件必须放在webapps/ROOT/static/js/app.js（或对应 context path 下） - Nginx 配置中确保
location /static/正确映射到磁盘路径，且没被其他location规则覆盖 - Spring Boot 等框架若启用了白页错误处理器（Whitelabel Error Page），也会返回 HTML，此时需确认静态资源路径是否被 MVC 路由拦截
file:// 协议下 URI 特殊字符触发的安全拦截
双击打开 HTML 文件时，Chrome/Edge 对 file:// 协议做了严格限制：含空格、中文、# 的路径会被直接拒绝，控制台显示 net::ERR_FILE_NOT_FOUND，但文件其实存在。
这不是编码问题，是浏览器主动屏蔽——它甚至不发请求，直接伪造 404。
- 不要依赖双击打开调试含动态路径的页面，一律用
http://localhost（Live Server、Python -m http.server、Vite preview） - 如果必须用 file://，路径中禁用空格、中文、
&、=、#；文件名用英文+下划线，目录扁平化 - VS Code 的 Live Server 插件要求文件已保存且扩展名为小写
.html，否则不会响应右键菜单 - 记事本另存为时选 UTF-8 编码，否则中文路径在部分系统下会变成乱码路径，进一步加剧解析失败
404 Not Found 可能来自服务端兜底页，Unexpected token '<' 其实是 HTML 冒充 JS，net::ERR_FILE_NOT_FOUND 往往根本没发请求。盯住 Network 面板里的真实响应内容，比看 Console 更可靠。 
