404错误表明服务器未找到请求的资源路径,需检查URL拼写、文件实际存放位置、大小写、构建产物路径、后端路由配置、反向代理规则及Nginx静态资源配置是否正确。

点击下载链接直接返回404
说明浏览器发出了请求,但服务器根本没找到对应资源路径。这不是前端 JS 逻辑问题,而是 URL 路径本身无效。
常见现象:<a href="/download/report.pdf">下载</a> 点击后跳转到 /download/report.pdf 页面并显示 404;或者 Network 面板里该请求状态码明确是 404 Not Found。
- 检查
href值是否拼写错误,比如/downlaod/(少个 o)、/download/reprot.pdf(reprot 拼错) - 确认文件真实存在于服务器指定路径:比如静态资源放在
public/download/下,那href就必须是/download/report.pdf,不能多写一层/static或漏掉/download - 注意大小写:Linux 服务器路径区分大小写,
Report.pdf和report.pdf是两个不同文件 - 如果用的是构建工具(如 Vite、Webpack),确保该文件被正确复制进输出目录(例如
dist/download/),而不是只留在src/里
后端生成的动态下载链接返回404
比如 <a href="/api/export?token=abc123">导出报表</a>,点开变成 404。这类链接依赖后端路由和权限控制,前端只负责跳转,出错大概率是服务端没配好。
- 确认后端是否真的注册了
GET /api/export这个路由(不是POST,也不是/v1/export) - 检查反向代理配置(Nginx/Apache):是否把
/api/前缀转发到了正确的后端服务?有没有遗漏location /api/ { proxy_pass http://backend; }这类规则 - 查看后端日志,确认请求是否到达服务进程;如果没有日志输出,基本可判定是网关或路由层拦截了
- 如果是前后端分离项目,注意开发环境下可能走 devServer 代理,但构建部署后代理失效,导致
/api/请求直连当前域名,而该域名下并无此接口
使用 fetch + a.download 触发下载却报404
这种写法常见于需要带认证头或 POST 参数的下载场景,但容易因路径构造不当直接 404。
立即学习“前端免费学习笔记(深入)”;
-
fetch('/export', { method: 'POST', body: JSON.stringify({id: 123}) })返回 404?先确认后端是否支持POST /export,很多框架默认只对GET开放静态资源路由 - 不要在 fetch URL 中手动拼查询参数,尤其含特殊字符时易出错;改用
URLSearchParams构造:fetch(`/export?${new URLSearchParams({id:123})}`) - 拿到 blob 后创建
<a download="xxx">标签时,href必须是URL.createObjectURL(blob),绝不能写成字符串路径,否则必然 404 - 大文件避免在内存中构造完整 blob,应优先让后端返回直链(如
{ downloadUrl: "/download/xxx.zip?ts=123" }),再用<a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c" download>触发,绕过前端 fetch 限制
本地开发能下,上线就404
本质是路径解析环境不一致。本地开发服务器(如 vite dev server)会自动 fallback 到 index.html,掩盖部分路径问题;而生产 Nginx/Apache 默认不处理前端路由 fallback,静态资源路径一错就露馅。
- 检查构建产物中文件实际位置:运行
ls -R dist/ | grep report.pdf,确认它真在dist/download/下,而不是被误打包进dist/assets/ - Nginx 配置里是否有
try_files $uri $uri/ /index.html;—— 这行只适用于 SPA 路由,**不能**让它接管所有请求,否则/download/xxx.pdf也会被重写到index.html,返回 200 HTML 内容而非文件,浏览器无法识别为下载 - 静态资源建议统一走
/static/前缀,并在 Nginx 单独配置location /static/ { alias /var/www/myapp/dist/static/; },避免和前端路由混淆
Content-Type 和 Location),比反复改 JS 更快定位问题。



















