当使用 HTML 表单向 Flask 后端发送数据时，若后端误用 request.get_json() 解析表单数据，会因 Content-Type 不匹配（application/x-www-form-urlencoded vs application/json）导致 415 错误；正确做法是使用 request.form 获取表单字段。
当使用 html 表单向 flask 后端发送数据时，若后端误用 request.get_json() 解析表单数据，会因 content-type 不匹配（application/x-www-form-urlencoded vs application/json）导致 415 错误；正确做法是使用 request.form 获取表单字段。
在 Web 开发中，HTTP 请求的 Content-Type 头决定了服务器如何解析请求体。浏览器原生 <form method="post"></form> 默认以 application/x-www-form-urlencoded 格式提交数据（例如 title=Buy+milk），而 request.get_json() 仅适用于 application/json 类型的请求（如 Fetch API 手动设置 headers: {'Content-Type': 'application/json'} 并发送 JSON 字符串）。两者不兼容，强行调用 get_json() 会导致 Flask 返回 415 Unsupported Media Type 错误。
✅ 正确的后端处理方式如下：
@app.route("/add-todo", methods=["POST"]) # 仅需 POST，GET 在此场景无意义
def add_todo():
title = request.form.get("title") # ✅ 使用 form 而非 get_json()
if not title or not title.strip():
return "Title is required", 400
db.session.add(Todo(title=title.strip()))
db.session.commit()
return "", 204⚠️ 同时，请确保前端表单字段具有 name 属性——这是浏览器序列化表单的关键：
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
<form action="/add-todo" method="post" hx-boost="true"> <input type="text" id="todo_bar" name="title"> <!-- ⚠️ 必须添加 name="title" --> <button type="submit" id="submit">Add</button> </form>
? 小贴士：
request.form是一个类字典对象，支持.get(key, default)安全取值；若需支持 JSON 和表单双模式（如同时服务 AJAX 和传统表单），可增加类型判断：if request.is_json: title = request.get_json().get("title") else: title = request.form.get("title")
总结：415 错误本质是前后端数据格式契约断裂。牢记「什么格式发送，就用什么方式接收」——表单用 request.form，JSON 请求用 request.get_json()，并始终校验字段存在性与合法性，才能构建健壮的表单交互逻辑。
