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
比如 @#@#@#@#@#@#@#@#@#@1，点开变成 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"></a>标签时，href必须是URL.createObjectURL(blob)，绝不能写成字符串路径，否则必然 404 - 大文件避免在内存中构造完整 blob，应优先让后端返回直链（如
{ downloadUrl: "/download/xxx.zip?ts=123" }），再用<a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c" download></a>触发，绕过前端 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 更快定位问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
