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:
- 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 -->- Flask Server
import sqlite3from flask import Flask, request, jsonifyfrom contact_messages_db import create_contact_tableapp = Flask(__name__, static_url_path='/frontend', static_folder='frontend')# Call the function to create the tablecreate_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)- 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- 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
Thanks in advanced.