在JavaScript开发中,"404错误"通常指的是资源未找到（Not Found）的HTTP状态码，但这在JS运行时可能表现为多种形式，理解这种错误的成因和解决方法，对开发者至关重要。
404错误的常见表现
当JS代码中引用的资源（如脚本、图片、API接口等）无法找到时，浏览器或Node.js环境会返回404错误，在浏览器控制台，这类错误通常显示为"Failed to load resource"或"NetworkError"，并附带404状态码，在Node.js中，可能表现为"ENOENT: no such file or directory"的错误提示。
浏览器环境下的404错误排查
资源路径问题
最常见的原因是资源路径错误,相对路径在不同层级页面中可能失效，假设主页面在/index.html，而脚本位于/js/main.js，若在HTML中使用<script src="js/main.js">，当页面位于/pages/home.html时，路径会错误地解析为/pages/js/main.js，导致404。
部署路径与本地开发不一致
在本地开发时,项目可能运行在localhost:3000，而部署到服务器后路径变为/my-app/，若代码中硬编码了绝对路径（如/js/main.js），部署后可能找不到资源，解决方案是使用相对路径或基于当前路径的动态计算。
跨域资源访问
如果尝试加载不同域名的资源（如CDN脚本），但服务器未正确配置CORS，浏览器会阻止加载并显示404错误，需确认资源URL是否正确，或联系资源提供方检查跨域设置。
Node.js环境下的404错误处理
文件系统操作中的404
Node.js中使用fs模块读取文件时，若文件不存在会抛出"ENOENT"错误，需通过try-catch或fs.existsSync()检查文件是否存在。
const fs = require('fs');
try {
const data = fs.readFileSync('nonexistent.txt', 'utf8');
} catch (err) {
if (err.code === 'ENOENT') {
console.log('文件不存在');
}
}
HTTP请求中的404处理
使用fetch或axios调用API时，服务器返回404需在代码中捕获：
fetch('https://api.example.com/invalid-endpoint')
.then(response => {
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
})
.catch(error => console.error(error));
预防404错误的最佳实践
使用模块化工具
现代前端项目通常使用Webpack或Vite等构建工具,它们能自动处理资源路径，通过import语句引入依赖，工具会确保路径正确打包。
静态资源版本控制
为静态资源添加哈希值（如main.a1b2c3d4.js），避免浏览器缓存旧版本导致404，构建工具通常支持自动生成带哈希的文件名。
API请求统一封装
在项目中封装统一的HTTP请求函数,自动处理404等错误状态，并集中管理错误提示逻辑。
相关问答FAQs
Q1: 为什么本地开发时资源正常，部署后出现404？
A1: 通常是因为部署路径与本地开发环境不一致，检查HTML/CSS/JS中的资源路径是否使用了相对路径，或确保部署服务器配置了正确的静态文件路由（如Nginx的location指令）。
Q2: 如何区分404错误是网络问题还是资源路径问题？
A2: 通过浏览器开发者工具的"Network"标签查看请求URL，若URL与预期不符，则是路径问题；若URL正确但服务器返回404，则是资源不存在或服务器配置问题，也可通过curl命令手动测试URL。