Comment résoudre 415 problèmes lorsque JavaScript envoie des requêtes AJAX POST à ​​un backend Flask

Comprendre les pièges des requêtes AJAX POST vers un backend Flask

Lors de la construction d'un projet Web avec un front-end JavaScript et un back-end Python Flask, la transmission de données peut rapidement devenir délicate, notamment lors de l'utilisation de requêtes AJAX POST. De nombreux développeurs rencontrent des problèmes frustrants tels que le code d'état 415, qui indique un type de média non pris en charge, et ont du mal à en identifier la cause première.

Ce problème se produit généralement lorsque le formatage des données ou les en-têtes HTTP ne correspondent pas à ce que le back-end attend. Le partage de ressources cross-origine (CORS) peut également présenter des obstacles supplémentaires lorsque le front-end et le back-end sont hébergés sur des serveurs distincts, ajoutant ainsi à la confusion.

Dans ce cas, une équipe travaillant sur un projet économique s'est heurtée à ces défis précis en essayant de transmettre des données JSON de leur interface GitHub basée sur JavaScript vers un serveur Flask hébergé sur PythonAnywhere. Leur parcours met en évidence les principaux défis liés à la configuration des en-têtes, à la résolution des problèmes CORS et à l'alignement de la structure des données pour éviter la redoutable erreur 415.

Si vous rencontrez des difficultés similaires, cet article vous guidera à travers les solutions possibles, notamment les bons en-têtes à utiliser, comment configurer Flask pour CORS et comment structurer correctement vos requêtes AJAX. À la fin, vous comprendrez comment résoudre ces problèmes et faire en sorte que votre front-end et votre back-end communiquent de manière transparente.

Implémentation de requêtes JSON POST entre JavaScript et Flask

Le Javascript AJAX La fonction joue un rôle crucial dans notre exemple en envoyant des données de manière asynchrone du front-end au backend Flask. Cette méthode permet aux utilisateurs d'envoyer des requêtes HTTP sans actualiser la page, ce qui rend l'application Web plus dynamique. Pour éviter l'erreur 415, la clé est de s'assurer que les données envoyées correspondent au type de contenu attendu par le serveur. Dans notre exemple, l'utilisation du contentType : 'application/json' l'en-tête garantit que le serveur Flask interprète correctement les données au format JSON.

Côté backend, Flask traite ces requêtes en écoutant sur la route définie à l'aide du @app.route() décorateur. Ce décorateur lie la route à une fonction, dans ce cas, test_route(). Il est important d'utiliser le requête.is_json fonction pour vérifier si la requête entrante a le format JSON attendu. Si le format est valide, le requête.get_json() La méthode extrait les données pour un traitement ultérieur. La fonction Flask renvoie ensuite une réponse JSON en utilisant jsonify(), complétant le cycle demande-réponse.

Manutention CORS (Cross-Origin Resource Sharing) est essentiel lorsque le front-end et le back-end sont hébergés sur des plates-formes différentes. Le flacon CORS() La fonction résout ce problème en autorisant les requêtes de toutes origines. Cela évite les blocages de sécurité du navigateur qui autrement rejetteraient la communication entre les pages GitHub (front-end) et PythonAnywhere (back-end). En utilisant en-têtes de réponse dans Flask, comme « Access-Control-Allow-Origin », garantit que le navigateur comprend quelles origines sont autorisées.

Enfin, l'utilisation de asynchrone/attendre dans l'exemple de l'API Fetch, garantit que le code JavaScript attend une réponse du serveur avant de continuer. Cette approche simplifie la gestion des erreurs et garantit que tout problème lié à la requête POST ou à la réponse du serveur est enregistré de manière appropriée. Les tests unitaires inclus dans les exemples sont essentiels pour vérifier que le code fonctionne comme prévu dans différents environnements, en détectant les erreurs dès le début du développement. En suivant ces pratiques, les développeurs peuvent créer des applications Web fiables avec un échange de données transparent entre le front-end et le back-end.

// JavaScript: AJAX request sending JSON data to Flask
function sendData() {
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:5000/testRoute',
        contentType: 'application/json',
        data: JSON.stringify({ 'hello': 'world' }),
        success: function (response) {
            console.log('Success:', response);
        },
        error: function (error) {
            console.log('Error:', error);
        }
    });
}

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Enable CORS for all routes

@app.route("/testRoute", methods=["POST"])
def test_route():
    if request.is_json:
        data = request.get_json()
        print(data)  # Log received JSON
        return jsonify({"message": "JSON received!"}), 200
    else:
        return jsonify({"error": "Unsupported Media Type"}), 415

if __name__ == "__main__":
    app.run(debug=True, host="127.0.0.1", port=5000)

# Flask: Unit tests for the backend route
import unittest
from app import app

class FlaskTest(unittest.TestCase):
    def setUp(self):
        self.app = app.test_client()
        self.app.testing = True

    def test_post_json(self):
        response = self.app.post('/testRoute',
                               json={"hello": "world"})
        self.assertEqual(response.status_code, 200)
        self.assertIn(b'JSON received!', response.data)

if __name__ == "__main__":
    unittest.main()

// JavaScript: Using Fetch API to send JSON to Flask
async function sendData() {
    const response = await fetch('http://127.0.0.1:5000/testRoute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 'hello': 'world' })
    });
    const data = await response.json();
    console.log('Response:', data);
}

Optimiser la communication entre le frontend et le backend Flask avec JSON

Un aspect clé de la résolution du erreur 415 lorsque l'on travaille avec JavaScript et Flask, il faut comprendre comment le backend s'attend à ce que les données soient formatées et comment les navigateurs appliquent les politiques CORS. JSON est la norme pour transmettre des données entre un frontend et un backend, et il est essentiel de garantir la configuration correcte des deux côtés. Un aspect souvent négligé est la façon dont les en-têtes ressemblent Type de contenu doivent s’aligner sur les données réelles envoyées. Lorsque JavaScript envoie une charge utile JSON, le backend doit être prêt à la lire correctement.

Un autre défi crucial vient des demandes de contrôle en amont. Les navigateurs envoient ces requêtes OPTIONS avant d'effectuer des requêtes POST d'origine croisée pour vérifier si le serveur accepte la requête entrante. Si le backend Flask ne répond pas avec les en-têtes corrects en réponse à la demande de contrôle en amont, le navigateur bloque la demande réelle. Configurer Flask pour renvoyer des en-têtes comme Access-Control-Allow-Origin et Access-Control-Allow-Methods pour les demandes de contrôle en amont est crucial pour éviter de tels problèmes.

Il est également important de noter que JSON n'est pas le seul type de données pouvant être envoyé via des requêtes POST. Les développeurs peuvent utiliser Données de formulaire des objets s'ils ont besoin d'envoyer des fichiers ou des champs de formulaire, et la configuration du backend pour accepter à la fois les formats de données JSON et en plusieurs parties peut améliorer la flexibilité. Enfin, tester le backend avec des outils comme Facteur avant l'intégration avec le frontend permet d'identifier les problèmes à un stade précoce. Des tests unitaires appropriés, comme indiqué précédemment, garantissent que chaque partie du processus de communication fonctionne de manière fiable dans tous les environnements.