Flask 表单提交失败的常见原因：前端请求地址与后端服务端口不匹配-Python教程-PHP中文网

Flask 表单提交失败的常见原因：前端请求地址与后端服务端口不匹配

本文详解 flask 应用中 html 表单无法提交（报 err_http_response_code_failure）的核心原因——前端 action 地址未正确指向 flask 服务端口，并提供完整调试流程、修复方案及安全增强建议。

本文详解 flask 应用中 html 表单无法提交（报 err_http_response_code_failure）的核心原因——前端 action 地址未正确指向 flask 服务端口，并提供完整调试流程、修复方案及安全增强建议。

在 Flask 全栈开发中，一个典型却易被忽视的问题是：Curl 命令可成功提交数据，但浏览器表单却始终失败，控制台仅显示模糊的 ERR_HTTP_RESPONSE_CODE_FAILURE 错误。这并非代码逻辑错误，而往往源于前后端通信路径的配置偏差。

从你提供的代码和排查过程可见，根本症结在于 HTML 表单的 action 属性指向了错误的服务地址：

<!-- ❌ 错误：未指定协议和端口，浏览器默认使用当前页面来源（如 VS Code Live Server 的 5500 端口） -->

当你的 HTML 页面由 VS Code Live Server（或其它本地服务器）在 http://127.0.0.1:5500 打开时，该相对路径 /backend/contact_messages_post_api 会被浏览器自动解析为 http://127.0.0.1:5500/backend/contact_messages_post_api —— 而 Flask 实际运行在 http://127.0.0.1:5000，导致跨源请求被拦截或直接连接拒绝，最终触发 ERR_HTTP_RESPONSE_CODE_FAILURE。

✅ 正确做法是显式指定 Flask 后端地址：

<!-- ✅ 修复：使用绝对 URL 指向 Flask 服务 -->

⚠️ 注意事项：

达芬奇

达芬奇——你的AI创作大师

下载

若部署到生产环境，请替换为真实域名（如 https://yourdomain.com/backend/contact_messages_post_api），并确保启用 HTTPS；
开发阶段避免混用多个本地服务器（如 Live Server + Flask），推荐统一由 Flask 提供静态文件（见下文优化建议）；
data-netlify="true" 属性与 Flask 后端冲突，应移除（Netlify Forms 仅适用于 Netlify 托管场景）。

此外，你当前的 Flask 路由存在关键兼容性问题：前端表单默认以 application/x-www-form-urlencoded 格式提交数据，但后端却尝试解析 JSON（request.json）。这将导致 data 为 None，进而引发数据库插入异常（虽未在控制台暴露，但会静默失败）。

? 修复 Flask 路由，支持两种常见提交方式：

@app.route('/backend/contact_messages_post_api', methods=['POST'])
def submit_contact_form():
    conn = sqlite3.connect('contact_messages.db')
    cursor = conn.cursor()

    try:
        # 优先尝试获取 JSON 数据（兼容 Curl）
        if request.is_json:
            data = request.get_json()
        # 否则从表单字段读取（兼容 HTML 表单）
        else:
            data = {
                'contact_name': request.form.get('contact_name'),
                'contact_email': request.form.get('contact_email'),
                'contact_message': request.form.get('contact_message')
            }

        # 验证必填字段
        if not all([data.get('contact_name'), data.get('contact_email'), data.get('contact_message')]):
            return jsonify({'error': 'Missing required fields'}), 400

        cursor.execute(
            "INSERT INTO contact_messages (contact_name, contact_email, contact_message) VALUES (?, ?, ?)",
            (data['contact_name'], data['contact_email'], data['contact_message'])
        )
        conn.commit()
        return jsonify({'message': 'Message submitted successfully'}), 201

    except Exception as e:
        conn.rollback()
        app.logger.error(f"Contact form submission failed: {e}")
        return jsonify({'error': 'Internal server error'}), 500
    finally:
        conn.close()

? 进阶建议：统一静态资源托管
当前目录结构（frontend/ 与 backend/ 分离）易引发路径混乱。推荐 Flask 直接托管前端资源，提升一致性与可维护性：

app = Flask(__name__, 
            static_url_path='',           # 根路径访问静态文件
            static_folder='frontend',      # 指向 frontend 文件夹
            template_folder='frontend')   # 如需 Jinja 模板

然后将 index.html 放入 frontend/，通过 return render_template('index.html') 渲染，并将表单 action 改为 /backend/contact_messages_post_api（此时同源，无需写完整 URL）。

总结：解决此类问题的关键在于 明确请求发起方（浏览器）与接收方（Flask）的网络上下文。务必检查 Chrome DevTools → Network 标签页中失败请求的 Headers → Request URL 和 Preview/Response，这是定位通信断点最直接的依据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！