👀 Views: 22 💬 Answers: 1 📅 Created: 2025-07-22

flask csrf flask-wtf javascript Python

I'm building a Flask application using Flask-WTF for form handling, and I've run into a peculiar scenario when dealing with asynchronous requests. My forms are generating CSRF tokens correctly, but I'm working with a `csrf_token` validation behavior when submitting the form via JavaScript fetch API. The behavior message I receive is `CSRF token missing or incorrect`. Here's a snippet of the relevant code: ```python from flask import Flask, request, jsonify from flask_wtf.csrf import CSRFProtect app = Flask(__name__) app.secret_key = 'my_secret_key' csrf = CSRFProtect(app) @app.route('/submit', methods=['POST']) def submit_form(): # Assuming you have form processing logic here return jsonify({'message': 'Success'}) ``` On the client-side, I’m using the following JavaScript to submit the form: ```javascript const form = document.getElementById('myForm'); form.addEventListener('submit', async (e) => { e.preventDefault(); const csrfToken = document.querySelector('input[name="csrf_token"]').value; const response = await fetch('/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken }, body: JSON.stringify({ data: 'example' }) }); const result = await response.json(); console.log(result); }); ``` I've confirmed that the CSRF token is present in the HTML when the page loads, and it seems to be sent correctly in the headers. However, I still get the validation behavior. I tried checking the CSRF configuration and ensuring the token is being sent as the `X-CSRFToken` header, but it hasn't resolved the scenario. I'm using Flask 2.2 and Flask-WTF 1.0.0. Any insights on why this might be happening or how to debug this further?