怎么排查HTML脚本引发的404错误-html教程-PHP中文网

html标签加载失败报404的根源是路径解析错误、服务端未暴露资源或协议限制；需通过network面板确认请求url，检查base标签影响，并直接访问该url验证服务端是否返回js内容而非html错误页。

怎么排查html脚本引发的404错误

HTML里<script>标签加载失败报404，不是脚本写错了，而是浏览器根本没拿到文件——问题出在路径解析、服务端映射或协议限制上。</script>

浏览器对 <script src></script> 的路径解析受当前页面 URL 和 <base> 标签双重影响，很容易算错真实请求地址。

打开开发者工具 → Network → 切换到 JS 过滤器，找到红色 404 请求，点开看 Request URL 字段，确认它是不是你预期的路径
如果当前页是 https://example.com/admin/user/，而你写了 <script src="js/app.js"></script>，浏览器会发请求到 /admin/user/js/app.js，不是根目录下的 /js/app.js
右键页面中该 <script></script> 标签 → “Copy link address”，粘贴出来看浏览器最终解析出的完整 URL 是否合理
若用了 <base href="/app/">，所有相对路径都会以 /app/ 为起点，src="js/app.js" 就变成 /app/js/app.js —— 检查这个路径在服务器上是否存在

即使路径拼对了，服务端也可能压根不提供该文件：权限拒绝、路由拦截、扩展名未注册、大小写不匹配，都可能让请求落到 404。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

直接在浏览器地址栏访问那个 Request URL（比如 https://example.com/js/app.js），看返回的是 JS 内容还是 HTML 页面（常见于 Tomcat/Nginx 默认错误页）
如果是 HTML，说明服务器没找到 JS 文件，兜底返回了 404 页面——此时控制台会报 Uncaught SyntaxError: Unexpected token '，本质是“资源缺失 + 错误页冒充 JS”
Linux 服务器严格区分大小写：/JS/app.js ≠ /js/app.js；Windows 下可能不报错，部署到生产环境就崩
Nginx/Apache 要确认 location 或 Directory 配置允许读取该路径，且没被 deny all 或 rewrite 规则意外拦截

动态拼接 src 时混入空格、中文、&、= 等未编码字符，浏览器会直接截断 URL，后半段根本不会发出去。

典型写法错误：<script src="js/data.js?name=%E5%BC%A0%E4%B8%89&id=123"></script> —— 张三 和 & 都没编码，请求可能只发了 js/data.js?name=张三
Network 面板里看失败请求的 Request URL，如果末尾突兀截断、或出现不完整 % 编码（如 %E4 后没字节），基本就是编码问题
正确做法：对每个查询参数值单独调用 encodeURIComponent()，例如 "js/data.js?name=" + encodeURIComponent(name) + "&id=" + encodeURIComponent(id)
绝对不要对整个 URL 字符串调用 encodeURIComponent()，它会把 ? 和 = 也编码，导致服务端无法解析

双击打开 HTML 文件（即走 file:// 协议）时，浏览器会主动拦截含空格、中文或某些符号的资源路径，直接报 404，连请求都不发。

现象：本地双击 index.html 正常，但 <script src="js/%E6%88%91%E7%9A%84%E8%84%9A%E6%9C%AC.js"></script> 报 404；换成 js/script.js 就行
这不是服务端问题，是浏览器安全策略——file:// 下没有服务端，所谓“404”其实是浏览器自己拒绝加载
解决办法只有一个：启动本地服务器（如 npx serve、python3 -m http.server），用 http://localhost:xxxx 访问，绕过 file:// 限制
构建工具（Vite、Webpack Dev Server）默认走 HTTP，所以开发时没问题，一导出静态文件双击就崩，容易误判