Cara Menyelesaikan 415 Isu Apabila JavaScript Menghantar Permintaan AJAX POST ke Bahagian Belakang Flask

Menyelesaikan 415 Ralat Apabila Menggunakan Permintaan AJAX dengan Bahagian Belakang Flask

Penyelesaian ini menggunakan gabungan JavaScript dengan jQuery untuk bahagian hadapan dan Flask untuk bahagian belakang, memfokuskan pada penghantaran data yang betul, pengendalian CORS dan penghuraian 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 Mengendalikan Data JSON dan Mengelakkan Ralat 415

Contoh ini menyediakan laluan Flask untuk menghuraikan JSON dengan betul dan mengendalikan permintaan silang asal (CORS) dengan mengkonfigurasi pengepala 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)

Menambah Ujian Unit untuk Memastikan Kod Berfungsi dalam Persekitaran Berbeza

Ujian unit memastikan laluan Flask bahagian belakang dan fungsi AJAX bahagian hadapan berfungsi dengan betul di bawah senario yang berbeza.

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

Penyelesaian Alternatif: Menggunakan API Ambil Daripada AJAX

Contoh ini menunjukkan penggunaan API Ambil untuk permintaan POST, yang merupakan alternatif moden kepada 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);
}

Soalan Biasa tentang Menghantar Permintaan POST daripada JavaScript ke Flask

1. Bagaimanakah cara saya menyelesaikan ralat Jenis Media Tidak Disokong 415?
2. Memastikan Content-Type pengepala sepadan dengan data yang dihantar. Jika anda menghantar JSON, tetapkan Content-Type kepada 'application/json'.
3. Mengapa saya mendapat ralat CORS dengan Flask?
4. Ralat CORS berlaku apabila bahagian hadapan dan hujung belakang berada pada domain yang berbeza. Gunakan Flask-CORS perpustakaan atau set Access-Control-Allow-Origin pengepala untuk membenarkan permintaan silang asal.
5. Apakah maksud permintaan prapenerbangan?
6. Permintaan prapenerbangan ialah a OPTIONS permintaan yang dihantar oleh penyemak imbas untuk menyemak sama ada pelayan menerima permintaan utama. Pastikan bahagian belakang anda mengendalikan permintaan OPTIONS dengan betul.
7. Bolehkah saya menghantar data bukan JSON melalui permintaan POST?
8. Ya, anda boleh gunakan FormData objek untuk menghantar fail atau medan borang. Pastikan bahagian belakang boleh menghuraikan kedua-dua jenis data JSON dan berbilang bahagian.
9. Bagaimanakah saya boleh menguji bahagian belakang Flask saya tanpa bahagian hadapan?
10. Gunakan alatan seperti Postman atau curl untuk menghantar permintaan terus ke bahagian belakang Flask anda, membolehkan anda menyahpepijat dengan lebih mudah.
11. Adakah saya memerlukan AJAX, atau bolehkah saya menggunakan API Ambil?
12. API Ambil ialah alternatif moden kepada $.ajax() dan menyediakan cara yang lebih bersih untuk mengendalikan permintaan HTTP dalam JavaScript.
13. Bagaimanakah cara saya mengesahkan data JSON dalam Flask?
14. guna request.get_json() untuk menghuraikan data masuk, dan menyemak medan yang diperlukan untuk memastikan permintaan mengandungi maklumat yang diharapkan.
15. Apakah yang perlu saya lakukan jika laluan Flask saya tidak bertindak balas?
16. Semak @app.route() penghias untuk memastikan URL dan kaedah HTTP ditakrifkan dengan betul.
17. Bagaimanakah saya boleh mengendalikan ralat dalam permintaan JavaScript POST?
18. Gunakan error panggil balik masuk $.ajax() atau .catch() dengan Fetch API untuk log dan mengendalikan sebarang kegagalan permintaan.
19. Bagaimanakah cara saya melindungi permintaan POST antara bahagian hadapan dan hujung belakang?
20. Gunakan HTTPS, sahkan input pada bahagian depan dan belakang, dan gunakan mekanisme pengesahan/kebenaran yang betul.

Mengakhiri Proses Menyelesaikan Masalah Permintaan AJAX POST

Menggunakan AJAX atau Ambil untuk menghantar data daripada JavaScript ke bahagian belakang Flask memerlukan mengkonfigurasi pengepala dengan betul dan mengendalikan CORS. Memastikan jenis kandungan sepadan dengan format data menghalang 415 ralat. Keupayaan Flask untuk mengurus laluan dan permintaan prapenerbangan memainkan peranan penting dalam pertukaran data yang lancar.

Menguji bahagian belakang secara bebas dengan alatan seperti Postman boleh membantu mengenal pasti isu lebih awal. Mengguna pakai amalan terbaik, seperti mengesahkan input dan menggunakan HTTPS, seterusnya memastikan penghantaran data selamat. Mengikuti garis panduan ini akan membolehkan komunikasi yang lebih baik antara bahagian hadapan dan bahagian belakang Flask anda, walaupun apabila dihoskan pada platform yang berbeza.