纯HTML无法实现真实留言板，必须依赖后端接口处理POST请求并存储数据；本地可用localStorage模拟，但刷新即丢失；上线需配置后端路由、正确设置Content-Type与body格式、防范XSS攻击、避免跨域问题。
HTML 留言板本质是表单 + 后端接口，纯 HTML 做不了存储
纯 HTML 文件本身没有服务器逻辑、不能读写数据库，所以「纯前端实现留言板」只可能停留在页面展示或本地模拟（比如用 localStorage），用户刷新就丢数据。真要保存留言、供他人查看，必须有后端服务接收 POST 请求并存入数据库。
常见错误现象：form 提交后页面跳转空白、控制台报 405 Method Not Allowed 或 404，本质是没配后端路由或服务器拒绝了表单提交。
- 如果只是练手或本地演示：用
localStorage暂存留言，配合 JS 渲染列表，但得明确告诉自己“这不算真实留言板” - 如果想上线可用：至少需要一个能处理
POST /api/message的后端（Node.js/Python/PHP 都行），前端fetch提交，后端返回成功后再刷新列表 - 别把
action="xxx.html"当成能存数据的路径——浏览器不会执行 HTML 文件里的“保存逻辑”
用 fetch + JSON API 提交留言时，Content-Type 和 body 格式必须匹配
很多初学者卡在后端收不到 req.body，其实是前端发的数据格式和后端解析方式对不上。比如 Express 默认不解析 application/json，而 PHP 的 $_POST 只认 application/x-www-form-urlencoded。
- 后端用 Express：确保加了
app.use(express.json())和app.use(express.urlencoded({ extended: true })) - 前端用
fetch发 JSON：必须设headers: { 'Content-Type': 'application/json' }，且body: JSON.stringify({ content, nickname }) - 前端用
fetch发表单编码：去掉Content-Type头，用new URLSearchParams({ content, nickname })作body - 错误示例：
JSON.stringify了但没设 header → 后端收到 raw string，req.body为空
防止 XSS 是留言板绕不开的安全动作，后端存之前必须转义或过滤
用户输入 <script>alert(1)</script>，如果不处理，下次渲染就会执行脚本——这不是“功能炫酷”，是严重漏洞。尤其用 innerHTML 直接插入留言内容时，风险拉满。
立即学习“前端免费学习笔记（深入）”；
- 前端临时缓解（不能替代后端）：用
textContent赋值而非innerHTML；或用DOMPurify.sanitize()过滤 HTML - 后端存储前必须做：PHP 用
htmlspecialchars($input, ENT_QUOTES, 'UTF-8')；Node.js 用he.escape()或模板引擎自动转义 - 别信“我只给自己人用”——只要暴露在公网，爬虫和扫描器分分钟打进来
- 富文本需求另说，但那是另一套权限+白名单策略，不是简单放开
<div>
部署时静态资源路径和 API 地址容易写死，导致跨域或 404
开发时用 localhost:3000 调后端，上线后忘了改请求地址，结果所有留言都发到本地，或者直接被浏览器拦截跨域请求。
- API 地址别硬编码：
const API_BASE = '/api'（同域）或从环境变量注入（如process.env.API_URL） - 静态 HTML 放在 Nginx 下，后端服务在另一个端口（如
http://localhost:8000），必须配 Nginx 反向代理，否则浏览器因跨域拒绝请求 - 检查浏览器开发者工具 Network 标签页：看
fetch请求的Request URL是不是你预期的地址，状态码是不是200 - 常见错误：Nginx 配了
location /api { proxy_pass http://backend; }，但后端接口实际是/v1/messages，漏了路径映射
真正麻烦的从来不是怎么写完，而是哪一步没校验、哪个路径没适配、哪种输入没过滤——这些点漏一个，上线后就是真实问题。
