Flask提交简单表单出现BadRequestKeyError与404错误求解

问题1：POST请求返回404状态码 #

原因 #

日志中记录的请求路径是/api/chat/5454，但后端定义的聊天接口路由为/chat/<room>，路径多了/api前缀，和后端路由不匹配，Flask找不到对应处理逻辑就会返回404。
另外前端的<form>标签没有定义action属性，默认会提交到当前页面路径，同时你的提交按钮是type="button"而非原生表单提交按钮，说明你大概率是通过自定义JS代码发送POST请求，请求路径写错多加了/api前缀。

修复方案 #

二选一即可：

• 修改后端路由，加上/api前缀：把@app.route("/chat/<room>",methods=['GET','POST'])改成@app.route("/api/chat/<room>",methods=['GET','POST'])
• 或者修改前端JS中的请求路径，去掉/api前缀，直接请求/chat/[房间号]

问题2：BadRequestKeyError: 'first'报错 #

原因 #

这个报错是request.form["first"]取值时，请求体里没有找到名为first的表单字段，触发了键不存在的异常，常见原因有两个：

1. POST请求的Content-Type不是表单格式：如果你用JS发送的是application/json格式的请求，参数存放在JSON体中，request.form无法读取，只能用request.get_json()读取
2. 提交请求时确实没有携带first字段，比如前端提交逻辑漏传了参数

修复方案 #

• 首先确认请求的Content-Type，如果是JSON格式，参数读取方式改成：

data = request.get_json()
name = data.get("first")
message = data.get("second")

• 如果是表单格式提交，把直接用下标取值的方式换成get方法，避免抛出异常，还可以增加判空逻辑：

name = request.form.get("first")
message = request.form.get("second")
if not name or not message:
    # 自定义缺少参数的处理逻辑
    return "缺少用户名或消息内容", 400

额外优化建议 #

• 你当前打开聊天记录文件用的是w覆盖写模式，每次提交新消息都会把之前的聊天记录清空覆盖，建议改成a追加模式：f=open(f"chat room {room}", "a")
• 表单提交按钮可以改成type="submit"，配合form的action属性用原生表单提交，减少JS出错概率，修改后form标签参考：

<form id="inform" method="POST" action="/chat/5454">
  User name:<input name="first" type=text>
  message:<input name="second" type=text>
  <input id="sendBtn" type="submit" value="send">
</form>

• 后端代码里把消息变量名拼成了massage（含义为按摩），建议修正为正确拼写message，方便后续维护。

内容的提问来源于stack exchange，提问作者Eyal Solomon