Flask接口Curl调用正常，UI表单POST请求报ERR_HTTP_RESPONSE_CODE_FAILURE

1. 检查表单提交的请求细节 #

• 打开Chrome DevTools的网络标签，勾选「保留日志」，提交表单后重点查看：
  • 请求URL是否与Flask接口路径完全一致（注意拼写、是否带多余后缀）
  • 请求头的Content-Type：Flask默认处理application/x-www-form-urlencoded，若表单设置了enctype="multipart/form-data"但后端未做对应处理，会导致解析失败；核对表单的enctype属性是否必要且正确
  • 表单数据完整性：查看「表单数据」栏，确认姓名、邮箱、消息字段的名称和值是否正确发送，是否与后端接收的字段名匹配（比如后端用request.form.get('name')，表单里的name属性不能写成username）

2. 排查Flask后端的响应异常 #

• 在POST接口处理函数开头添加日志，对比Curl请求与表单请求的差异：

  from flask import request, current_app
  
  @app.route('/contact', methods=['POST'])
  def contact():
      current_app.logger.info(f"请求头: {dict(request.headers)}")
      current_app.logger.info(f"表单数据: {request.form.to_dict()}")
      # 原有业务逻辑...
  

  开启Flask调试模式（app.run(debug=True)），查看控制台日志，确认后端是否接收到表单数据，以及哪一步出现问题
• 添加异常捕获，暴露具体错误：

  @app.route('/contact', methods=['POST'])
  def contact():
      try:
          name = request.form.get('name')
          email = request.form.get('email')
          message = request.form.get('message')
          # SQLite插入操作...
          return "提交成功", 200
      except Exception as e:
          current_app.logger.error(f"错误详情: {str(e)}")
          return f"提交失败: {str(e)}", 500
  

  若后端存在未处理的异常，会直接返回500错误，导致浏览器报响应失败，捕获后可明确错误原因

3. 验证跨域同源问题（若存在） #

• 如果前端页面与Flask服务的域名/端口不一致（比如前端在http://localhost:5500，Flask在http://localhost:5000），浏览器会触发同源策略拦截响应。此时需为Flask添加CORS支持：
  安装依赖：pip install flask-cors
  代码中配置：

  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app)  # 开发环境允许所有跨域请求，生产环境可指定允许的域名
  

4. 核对表单的action属性 #

• 确认HTML表单的action属性是否指向正确的Flask接口路径，例如：

  <form action="/contact" method="POST">
    <!-- 表单字段 -->
  </form>
  

  若action为空，会默认提交到当前页面URL，若当前页面并非Flask接口路径，直接导致请求错误

可参考的本地文档 #

• Flask官方文档「请求处理」章节：重点学习request.form的使用、响应状态码的规范设置
• Flask官方文档「调试模式」说明：了解如何开启调试模式查看详细错误栈
• Python SQLite官方文档：确认数据库插入操作的语法与参数传递是否正确

内容的提问来源于stack exchange，提问作者Christián De Achával