Cara Mengatasi Flask AJAX: Bad Request. The CSRF token is missing
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!