Cara Mengatasi Masalah 415 Saat JavaScript Mengirim Permintaan AJAX POST ke Backend Flask

Mengatasi Kesalahan 415 Saat Menggunakan Permintaan AJAX dengan Backend Flask

Solusi ini menggunakan kombinasi JavaScript dengan jQuery untuk front-end dan Flask untuk back-end, dengan fokus pada transmisi data yang tepat, penanganan CORS, dan parsing JSON.

// 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);
        }
    });
}

Menggunakan Flask untuk Menangani Data JSON dan Menghindari Error 415

Contoh ini menyiapkan rute Flask untuk mengurai JSON dengan benar dan menangani permintaan lintas asal (CORS) dengan mengonfigurasi header respons.

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)

Menambahkan Tes Unit untuk Memastikan Kode Berfungsi di Lingkungan Berbeda

Pengujian unit memastikan bahwa rute Flask backend dan fungsi AJAX front-end berperilaku benar dalam skenario yang berbeda.

# 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()

Solusi Alternatif: Menggunakan Fetch API Daripada AJAX

Contoh ini menunjukkan penggunaan Fetch API untuk permintaan POST, yang merupakan alternatif modern untuk AJAX.

// 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);
}

Pertanyaan Umum tentang Mengirim Permintaan POST dari JavaScript ke Flask

1. Bagaimana cara mengatasi kesalahan 415 Jenis Media Tidak Didukung?
2. Pastikan Content-Type header cocok dengan data yang dikirim. Jika Anda mengirim JSON, setel Content-Type ke 'application/json'.
3. Mengapa saya mendapatkan kesalahan CORS dengan Flask?
4. Kesalahan CORS terjadi ketika frontend dan backend berada di domain yang berbeda. Gunakan Flask-CORS perpustakaan atau set Access-Control-Allow-Origin header untuk mengizinkan permintaan lintas asal.
5. Apa yang dimaksud dengan permintaan pra-penerbangan?
6. Permintaan sebelum penerbangan adalah OPTIONS permintaan dikirim oleh browser untuk memeriksa apakah server menerima permintaan utama. Pastikan backend Anda menangani permintaan OPTIONS dengan benar.
7. Bisakah saya mengirim data non-JSON melalui permintaan POST?
8. Ya, Anda bisa menggunakannya FormData objek untuk mengirim file atau bidang formulir. Pastikan backend dapat mengurai tipe data JSON dan multipart.
9. Bagaimana cara menguji backend Flask saya tanpa frontend?
10. Gunakan alat seperti Postman atau curl untuk mengirim permintaan langsung ke backend Flask Anda, memungkinkan Anda melakukan debug dengan lebih mudah.
11. Apakah saya memerlukan AJAX, atau bisakah saya menggunakan Fetch API saja?
12. Fetch API adalah alternatif modern $.ajax() dan menyediakan cara yang lebih bersih untuk menangani permintaan HTTP di JavaScript.
13. Bagaimana cara memvalidasi data JSON di Flask?
14. Menggunakan request.get_json() untuk mengurai data yang masuk, dan memeriksa bidang yang wajib diisi untuk memastikan permintaan berisi informasi yang diharapkan.
15. Apa yang harus saya lakukan jika rute Flask saya tidak merespons?
16. Periksa @app.route() dekorator untuk memastikan URL dan metode HTTP didefinisikan dengan benar.
17. Bagaimana cara menangani kesalahan dalam permintaan JavaScript POST?
18. Gunakan error panggilan balik masuk $.ajax() atau .catch() dengan Fetch API untuk mencatat dan menangani kegagalan permintaan apa pun.
19. Bagaimana cara mengamankan permintaan POST antara frontend dan backend?
20. Gunakan HTTPS, validasi input di frontend dan backend, dan terapkan mekanisme autentikasi/otorisasi yang tepat.

Menyelesaikan Proses Pemecahan Masalah Permintaan AJAX POST

Menggunakan AJAX atau Fetch untuk mengirim data dari JavaScript ke backend Flask memerlukan konfigurasi header dengan benar dan penanganan CORS. Memastikan tipe konten cocok dengan format data mencegah kesalahan 415. Kemampuan Flask untuk mengelola rute dan permintaan pra-penerbangan memainkan peran penting dalam kelancaran pertukaran data.

Menguji backend secara mandiri dengan alat seperti Postman dapat membantu mengidentifikasi masalah sejak dini. Mengadopsi praktik terbaik, seperti memvalidasi input dan menggunakan HTTPS, semakin memastikan transmisi data yang aman. Mengikuti panduan ini akan memungkinkan komunikasi yang lebih baik antara front-end dan backend Flask Anda, bahkan ketika dihosting di platform yang berbeda.