为何Flask应用无法接收HTML页面发送的POST请求？

错误原因 #

你碰到的501错误，是因为表单提交的请求发给了python3 -m http.server（Python内置的这个服务器不支持POST方法），而非你的Flask应用。核心问题有两个：

• 你尝试让Flask和http.server同时监听8080端口，这不可能实现，实际只有其中一个服务在运行；
• 表单的action="/login"是相对路径，默认指向托管HTML的服务器（http.server），而非Flask应用的地址。

解决方案 #

方案1：让Flask直接托管静态HTML（推荐）

不需要单独启动http.server，直接用Flask托管页面和接口：

1. 在Flask项目根目录创建static文件夹，把你的HTML文件放进去（比如命名为index.html）；
2. 修改Flask代码，添加返回静态页面的路由，同时修正密码字段的取值：

from flask import Flask, jsonify, request, send_from_directory

app = Flask(__name__)

@app.route('/')
def serve_login_page():
    return send_from_directory('static', 'index.html')

@app.route('/login', methods=['POST'])
def login():
    user = request.form.get("user")
    password = request.form.get("pass")  # 注意：HTML中密码输入框的name是"pass"，不是"password"
    return jsonify({"message": "successfully posted"})

if __name__ == "__main__":
    app.run(host="localhost", port=8080, debug=True)

3. 运行Flask应用，访问http://localhost:8080，提交表单即可正常发送POST请求到Flask接口。

方案2：分开端口，指定表单完整请求地址

如果坚持用http.server托管HTML：

1. 修改Flask的监听端口（避免和http.server冲突）：

if __name__ == "__main__":
    app.run(host="localhost", port=5000, debug=True)

2. 修改HTML表单的action属性，指定Flask应用的完整地址：

<form method="post" action="http://localhost:5000/login">

3. 分别启动两个服务：

• 启动Flask：python3 app.py
• 启动http.server：python3 -m http.server 8080

4. 访问http://localhost:8080提交表单，请求会正确发送到Flask的5000端口。

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