Cara Mengatasi Flask AJAX: Bad Request. The CSRF token is missing

Ketika menjalankan aplikasi web menggunakan framework dari Python, yaitu Flask, kita mendapatkan Error: 400: BAD REQUEST. Error ini didapatkan setelah kita mengirimkan request form AJAX dengan tipe POST.

Masalah

Mengapa Error ini bisa terjadi? Hal ini terjadi ketika kita sudah mengaktifkan fitur CSRF Token dari library flask_wtf.

Memang kita sudah mengaktifkan fitur ini secara global dengan syntax kira-kira seperti ini:

csrf = CSRFProtect()

app = Flask(__name__)
csrf.init_app(app)

Akan tetapi masalah timbul ketika menggunakan CSRF requestnya pakai AJAX. Jadi, karena aplikasinya menggunakan library Flask WTF, kita diharuskan untuk mengecek apakah ada CSRF Token yang dikirim dari request form AJAX tersebut.

Solusi

Untuk mengatasi masalah ini, kita bisa menambahkan CSRF Tokennya pada header request. Contoh codingannya seperti berikut:

Cara Pertama

var csrf_token = "{{ csrf_token() }}";

$.ajax({
    url: "/login",
    method: "POST",
    dataType: "json",
    headers: {
        "X-CSRFToken": csrf_token,
    }    
    data: {   
        // Your JavaScript codes
    }
});  

Penjelasan: Untuk cara pertama ini, bisa dilihat kita menambahkan parameter headers di dalam method AJAX dengan isi "X-CSRFToken": csrf_token



Cara Kedua

<script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRFToken": "{{ csrf_token() }}"
            }
        });

        // Your JavaScript codes...
    });
</script>

Penjelasan: Untuk cara kedua ini, kita juga tetap menambahkan parameter headers akan tetapi kita tambahkan di dalam method ajaxSetup(). Cara ini mirip seperti di Laravel ketika kita ingin mengatasi error token mismatch.

Kenapa menggunakan cara kedua ini kalau ada cara yang pertama? Jika kita menggunakan cara kedua ini, kita tidak perlu menambahkan parameter headers disetiap method/fungsi yang ada AJAXnya.

Jadi, method ajaxSetup() ini akan membuat nilai default untuk semua request AJAX. Bahasa gampangnya, semua parameter yang ada di method ini akan dicek duluan jika ada parameter di dalamnya tanpa perlu kita definisikan lagi di setiap fungsi-fungsi yang ada AJAXnya.

Akhir Kata

Apa pun cara yang kita gunakan, error 400 BAD REQUEST harusnya sudah teratasi dan tidak akan muncul lagi. Kalau saya sendiri sihh, saya lebih memilih cara yang kedua karena lebih simpel hanya perlu tulis sekali syntax method ajaxSetup() nya, tanpa harus menulis berkali-kali parameter headersnya di fungsi AJAX yang lain.

Sekian tutorial kali ini, terima kasih sudah membaca. Jika masih ada masalah, silakan komen di kolom komentar Disqus di bawah ini.

Happy Coding!

Rinaldi Pratama Putra Reality is a lovely place, but I wouldn't wanna live there.

Share :