pythonhtmlflask

Flask App works with Curl but not with HTTP request


Situation: This is my first full-stack project, I'm using HTML/CSS/Bootstrap with Python/Flask/SQLite for a simple rental booking webapp; home page is complete, and includes among other things a simple contact form for visitors to send questions about the rental units.

I was able to create a Flask server that upon receiving a Curl request stores a contact message in SQLite. The record includes a name, email, and contact message.

Problem: When I try to send the same from the UI I get the following error code on the Chrome Network tab: "ERR_HTTP_RESPONSE_CODE_FAILURE"

Notes: The Curl command is using POST, the Flask server expects POST, and the web app contact form is using POST. Flask server is running when I try this out.

Please let me know what I can read or any possible places where I can debug further.

Code snippets:

  1. HTML Contact Form
<!-- Contact us starts -->
  <div class="contact-form">
    <div class="form-header">
      <p>Have questions? We'd love to hear from you! Please use this form to get in touch.</p>
    </div>
    <form name="contact" id="contact-form" method="POST" action="/backend/contact_messages_post_api" data-netlify="true">
    <div class="form-group">
      <label for="contact_name">Name:</label>
      <input type="text" id="contact_name" name="contact_name" required>
    </div>
    <div class="form-group">
      <label for="contact_email">Email:</label>
      <input type="email" id="contact_email" name="contact_email" required>
    </div>
    <div class="form-group">
      <label for="contact_message">Message:</label>
      <textarea id="contact_message" name="contact_message" required></textarea>
    </div>
    <div class="call-to-action-container centered">
      <input type="submit" value="Send">
    </div>
  </div>
  <!-- Contact us ends -->
  1. Flask Server
import sqlite3
from flask import Flask, request, jsonify
from contact_messages_db import create_contact_table

app = Flask(__name__, static_url_path='/frontend', static_folder='frontend')

# Call the function to create the table
create_contact_table()

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

    # Handle the POST request here 
    data = request.json
    # Extract data fields
    contact_name = data.get('contact_name')
    contact_email = data.get('contact_email')
    contact_message = data.get('contact_message')
    
    # Insert data into the database
    cursor.execute("INSERT INTO contact_messages (contact_name, contact_email, contact_message) VALUES (?, ?, ?)",
                   (contact_name, contact_email, contact_message))
    
    # Commit changes
    conn.commit()

    return jsonify({'message': 'Data received and stored successfully'})

if __name__ == '__main__':
    app.run(debug=True)
  1. Curl command
curl -X POST -H "Content-Type: application/json" -d '{"contact_name": "John Doe", "contact_email": "john@example.com", "contact_message": "Hello, this is test 3."}' http://127.0.0.1:5000/backend/contact_messages_post_api
  1. Folder structure (is it a big problem if the Flask server is not enclosing the HTML files??):

root/

-- backend/

---- contact_messages_post_api.py

---- contact_messages.db

-- frontend/

---- index.html

---- styles.css


Solution

  • Added logging, but nothing was coming up either.

    Later found the networking issue by pressing on the error code in the Chrome console, I saw that the header was going to 127.0.0.1:5500/backend/contact_messages_post_api when looking into terminal, I saw the flask server was running on 127.0.0.1:5000

    Adjusted the action attribute on the form to target the actual http port: action="127.0.0.1:5000/backend/contact_messages_post_api"

    I know it worked because I got an error log from the logging you suggested! :) Thanks much! Now going to debug the new error :)