Techniques pour résoudre les problèmes cross-origin avec AJAX

Voici plusieurs approches pour gérer les restrictions de cross-origin dans les requêtes AJAX, en utilisant Django comme environnement backend.

Méthode 1 : Inclure le jeton CSRF dans le corps de la requête

Dans cette méthode, le jeton CSRF est transmis directement dans les données POST de la requête AJAX. Cela requiert de générer la valeur du jeton dans le docuemnt frontend.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exemple de jeton CSRF via données</title>
</head>
<body>
<button id="envoi">Envoyer</button>
{% csrf_token %}
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $('#envoi').click(function() {
        $.ajax({
            url: "/traitement/",
            type: "POST",
            data: {
                info: "donnees",
                csrf_token: $("[name='csrfmiddlewaretoken']").val()
            },
            success: function(resultat) {
                console.log(resultat);
            }
        });
    });
</script>
</html>



from django.shortcuts import render, HttpResponse

def traitement_requete(request):
    if request.method == "POST":
        print(request.POST)  # Affiche les données POST, incluant le jeton CSRF
        return HttpResponse('Traitement effectué')
    return render(request, 'modele.html')

Méthode 2 : Configurer les paramètres AJAX globalement avec $.ajaxSetup()

Ici, la fonction jQuery.ajaxSetup() est utilisée pour préconfiguerr le jeton CSRF pour toutes les requêtes AJAX, évitant ainsi de le spécifier à chaque appel.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exemple avec configuration globale AJAX</title>
</head>
<body>
<button id="envoi">Envoyer</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $.ajaxSetup({
        data: {csrf_token: '{{ csrf_token }}'}
    });

    $('#envoi').click(function() {
        $.ajax({
            url: "/traitement/",
            type: "POST",
            data: {info: "donnees"},
            success: function(resultat) {
                console.log(resultat);
            }
        });
    });
</script>
</html>



def traitement_requete(request):
    if request.method == "POST":
        print(request.POST)  # Le jeton CSRF est automatiquement inclus
        return HttpResponse('Traitement effectué')
    return render(request, 'modele.html')

Méthode 3 : Transmettre le jeton CSRF via les en-têtes HTTP et les cookies

Cette technique nécessite la bibliothèque jquery.cookie.js pour lire le jeton CSRF depuis les cookies et l'envoyer dans les en-têtes HTTP de la requête AJAX.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exemple avec en-têtes personnalisés</title>
</head>
<body>
<button id="envoi">Envoyer</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-cookie@1.4.1/jquery.cookie.min.js"></script>
<script>
    $('#envoi').click(function() {
        $.ajax({
            url: "/traitement/",
            type: "POST",
            headers: {
                "X-CSRFToken": $.cookie('csrftoken'),
                "X-Custom-Header": "valeur_specifique"
            },
            data: {info: "donnees"},
            success: function(resultat) {
                console.log(resultat);
            }
        });
    });
</script>
</html>



from django.shortcuts import render, HttpResponse

def traitement_requete(request):
    if request.method == "POST":
        print(request.POST)  # Données POST sans jeton CSRF ici
        print(request.META)  # Le jeton CSRF se trouve dans les en-têtes HTTP
        return HttpResponse('Traitement effectué')
    return render(request, 'modele.html')

Étiquettes: AJAX Django jQuery CSRF Cross-Origin

Publié le 1 juin à 00h52

Étiquettes Populaires

©2026 L'Atelier Monstre