action="/api/submit"从域名根目录解析，提交至https://example.com/api/submit；action="api/submit"在当前url路径末尾追加，如当前页为/admin/user/edit，提交至/admin/user/edit/api/submit。
action="/api/submit" 和 action="api/submit" 的实际行为差异
浏览器对 action 值的解析完全取决于开头字符，不是“绝对 vs 相对”的概念模糊判断，而是明确的路径解析规则：
-
action="/api/submit"：从域名根目录开始拼接，当前页是https://example.com/admin/user/edit?id=123，提交目标仍是https://example.com/api/submit -
action="api/submit"：在当前 URL 路径末尾追加，即变成https://example.com/admin/user/edit/api/submit（注意 query 参数会被丢弃） -
action="./api/submit"等价于action="api/submit"，语义更清晰但行为一致 -
action="../submit"会退一级再拼，当前页为/admin/user/时，提交到/admin/submit；若当前页是/，则可能退到协议层导致 404
嵌套路由页面（如 /dashboard/settings/profile）下用相对路径极易错配 endpoint，这是上线后 404 的高频原因。
部署在子路径（如 /myapp/）时 action 怎么写才不炸
如果你的应用部署在非根路径（比如 Nginx 反向代理到 https://example.com/myapp/），action="/api/login" 会直接请求 https://example.com/api/login，而不是 /myapp/api/login —— 这是典型 404 场景。
解决方式不是改所有 action，而是统一处理路径上下文：
- 用
<base href="/myapp/">在中声明基准路径，之后所有相对路径（包括action="api/login"）都会以/myapp/为起点 - 构建时注入环境变量，让前端代码生成带前缀的 action，如
action="${BASE_PATH}/api/login" - 反向代理配置 rewrite 规则，把
/api/请求透传到后端，避免前端感知部署路径
硬编码 action="/myapp/api/login" 看似可行，但会让开发环境（localhost:3000）和生产环境路径不一致，增加维护成本。
含文件上传的表单必须设 enctype="multipart/form-data"
只要表单里有 <input type="file">，无论 action 指向哪里，都必须显式设置 enctype="multipart/form-data"。否则浏览器会按默认的 application/x-www-form-urlencoded 编码，后端收不到文件字段，甚至整个请求体被截断。
常见错误现象：
- Chrome DevTools Network 面板里看到请求 payload 是空的或只有文本字段
- 后端日志报 “no multipart boundary” 或 “invalid content-type”
- Node.js 的
express+multer报Unexpected field错误
这个属性和 action 路径无关，但常被一起忽略——尤其当开发者只改了 action 却忘了检查 enctype。
前端路由（React Router / Vue Router）下空 action 的真实行为
action="" 或省略 action 属性时，浏览器仍会发起原生 form submit 请求，目标是当前 URL（不含 query 参数）。但问题出在框架拦截：
- React Router 的
BrowseRouter默认使用 HTML5 History API，submit 后页面刷新，路由状态丢失 - Vue Router 的
history模式下，submit 触发 full reload，JS 路由守卫不会执行 - 如果用了
event.preventDefault()手动拦截并用 axios 提交，那action完全失效，此时填什么都无所谓
所以空 action 不是“兼容前端路由”，而是“没被框架接管前的最后一搏”。真要共存，要么用 <form method="post" action="/api/submit"></form> 让浏览器直连后端，要么彻底放弃原生 submit，走 JS 控制流。
最易被忽略的点：action 路径是否带斜杠，决定的是解析起点，不是“看起来像不像绝对路径”；而 enctype、base 标签、前端路由拦截，这三者任何一个漏掉，都可能让看似正确的 action 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
