Kaip išspręsti 415 problemas, kai „JavaScript“ siunčia AJAX POST užklausas į „Flask Backend“

415 klaidų sprendimas naudojant AJAX užklausas su „Flask Backend“.

Šiame sprendime naudojamas „JavaScript“ derinys su „jQuery“ priekinėje dalyje ir „Flask“ užpakalinėje dalyje, daugiausia dėmesio skiriant tinkamam duomenų perdavimui, CORS tvarkymui ir JSON analizei.

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

Kolbos naudojimas JSON duomenims tvarkyti ir 415 klaidų išvengimas

Šiame pavyzdyje nustatomas kolbos maršrutas, kad būtų galima teisingai išanalizuoti JSON ir apdoroti kryžminės kilmės užklausas (CORS), konfigūruojant atsakymų antraštes.

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)

Vienetų testų pridėjimas, siekiant užtikrinti, kad kodas veiktų įvairiose aplinkose

Įrenginio testavimas užtikrina, kad užpakalinis kolbos maršrutas ir priekinė AJAX funkcija tinkamai veiktų pagal skirtingus scenarijus.

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

Alternatyvus sprendimas: naudokite Fetch API vietoj AJAX

Šiame pavyzdyje demonstruojamas Fetch API naudojimas POST užklausoms, kuri yra moderni AJAX alternatyva.

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

Dažni klausimai apie POST užklausų siuntimą iš „JavaScript“ į „Flask“.

1. Kaip išspręsti 415 nepalaikomo laikmenos tipo klaidą?
2. Užtikrinti, Content-Type antraštė atitinka siunčiamus duomenis. Jei siunčiate JSON, nustatykite Content-Type į 'application/json'.
3. Kodėl su „Flask“ gaunu CORS klaidą?
4. CORS klaidos atsiranda, kai priekinė ir užpakalinė dalis yra skirtinguose domenuose. Naudokite Flask-CORS biblioteka ar rinkinys Access-Control-Allow-Origin antraštes, kad būtų galima teikti kelių šaltinių užklausas.
5. Ką reiškia išankstinio patikrinimo užklausa?
6. Išankstinio patikrinimo užklausa yra OPTIONS naršyklės išsiųsta užklausa patikrinti, ar serveris priima pagrindinę užklausą. Įsitikinkite, kad jūsų užpakalinė programa tinkamai tvarko OPTIONS užklausas.
7. Ar galiu siųsti ne JSON duomenis naudodamas POST užklausą?
8. Taip, galite naudoti FormData objektai failams ar formos laukams siųsti. Įsitikinkite, kad užpakalinė programa gali išanalizuoti tiek JSON, tiek kelių dalių duomenų tipus.
9. Kaip galiu išbandyti „Flask“ pagrindinę programą be priekinės dalies?
10. Naudokite tokius įrankius kaip Postman arba curl siųsti užklausas tiesiai į „Flask“ pagrindinę programą, kad galėtumėte lengviau derinti.
11. Ar man reikia AJAX, ar galiu naudoti „Fetch API“?
12. „Fettch“ API yra moderni alternatyva $.ajax() ir suteikia švaresnį būdą tvarkyti HTTP užklausas JavaScript.
13. Kaip patvirtinti JSON duomenis „Flask“?
14. Naudokite request.get_json() išanalizuoti gaunamus duomenis ir patikrinti, ar nėra privalomų laukų, kad įsitikintumėte, jog užklausoje yra laukiamos informacijos.
15. Ką daryti, jei kolbos maršrutas nereaguoja?
16. Patikrinkite @app.route() dekoratorius, kad užtikrintų, jog URL ir HTTP metodai būtų tinkamai apibrėžti.
17. Kaip galiu tvarkyti „JavaScript“ POST užklausų klaidas?
18. Naudokite error atgalinis skambutis $.ajax() arba .catch() su Fetch API, kad galėtumėte prisijungti ir apdoroti bet kokias užklausų klaidas.
19. Kaip apsaugoti POST užklausas tarp frontend ir backend?
20. Naudokite HTTPS, patvirtinkite įvestis tiek priekinėje, tiek užpakalinėje sistemoje ir taikykite tinkamus autentifikavimo / autorizacijos mechanizmus.

AJAX POST užklausų trikčių šalinimo proceso pabaiga

Naudojant AJAX arba Fetch duomenims iš „JavaScript“ siųsti į „Flask“ užpakalinę programą, reikia tinkamai sukonfigūruoti antraštes ir tvarkyti CORS. Užtikrinant, kad turinio tipas atitiktų duomenų formatą, išvengiama 415 klaidų. „Flask“ gebėjimas valdyti maršrutus ir išankstines užklausas atlieka esminį vaidmenį sklandžiame duomenų mainuose.

Nepriklausomai išbandę pagrindinę programą naudodami tokius įrankius kaip „Postman“, galite anksti nustatyti problemas. Geriausios praktikos taikymas, pvz., įvesties patvirtinimas ir HTTPS naudojimas, dar labiau užtikrina saugų duomenų perdavimą. Jei laikysitės šių gairių, galėsite geriau bendrauti tarp jūsų sąsajos ir „Flask“ vidinės sistemos, net kai jos priglobtos skirtingose ​​platformose.