JavaScript が Flask バックエンドに AJAX POST リクエストを送信する際の 415 問題を解決する方法

Flask バックエンドで AJAX リクエストを使用する場合の 415 エラーの解決

このソリューションでは、フロントエンドには JavaScript と jQuery、バックエンドには Flask を組み合わせて使用​​し、適切なデータ送信、CORS の処理、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);
        }
    });
}

Flask を使用した JSON データの処理と 415 エラーの回避

この例では、応答ヘッダーを構成することで、JSON を正しく解析し、クロスオリジン要求 (CORS) を処理するように Flask ルートを設定します。

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)

単体テストを追加してコードが異なる環境で動作することを確認する

単体テストでは、バックエンドの Flask ルートとフロントエンドの AJAX 関数がさまざまなシナリオで正しく動作することを確認します。

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

代替解決策: AJAX の代わりに Fetch API を使用する

この例では、AJAX の最新の代替手段である POST リクエストに Fetch API を使用する方法を示します。

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

JavaScript から Flask への POST リクエストの送信に関するよくある質問

1. 415 Unsupported Media Type エラーを解決するにはどうすればよいですか?
2. を確認してください。 Content-Type ヘッダーが送信されるデータと一致します。 JSON を送信する場合は、次のように設定します。 Content-Type に 'application/json'。
3. Flask で CORS エラーが発生するのはなぜですか?
4. CORS エラーは、フロントエンドとバックエンドが異なるドメインにある場合に発生します。を使用します。 Flask-CORS ライブラリまたはセット Access-Control-Allow-Origin ヘッダーを使用してクロスオリジンリクエストを許可します。
5. プリフライトリクエストとはどういう意味ですか?
6. プリフライトリクエストは、 OPTIONS ブラウザーによって送信されたリクエストを使用して、サーバーがメインリクエストを受け入れるかどうかを確認します。バックエンドが OPTIONS リクエストを適切に処理していることを確認してください。
7. POST リクエストを通じて非 JSON データを送信できますか?
8. はい、使用できます FormData ファイルまたはフォームフィールドを送信するためのオブジェクト。バックエンドが JSON データ型とマルチパート データ型の両方を解析できることを確認してください。
9. フロントエンドなしで Flask バックエンドをテストするにはどうすればよいですか?
10. 次のようなツールを使用します Postman または curl リクエストを Flask バックエンドに直接送信して、より簡単にデバッグできるようにします。
11. AJAX は必要ですか? それとも代わりに Fetch API を使用できますか?
12. Fetch API は、次の最新の代替手段です。 $.ajax() JavaScript で HTTP リクエストを処理するためのよりクリーンな方法を提供します。
13. Flask で JSON データを検証するにはどうすればよいですか?
14. 使用 request.get_json() 受信データを解析し、必須フィールドをチェックして、リクエストに予期される情報が含まれていることを確認します。
15. Flask ルートが応答しない場合はどうすればよいですか?
16. チェックしてください @app.route() デコレータを使用して、URL と HTTP メソッドが正しく定義されていることを確認します。
17. JavaScript POST リクエストのエラーを処理するにはどうすればよいですか?
18. を使用します。 error コールバック $.ajax() または .catch() Fetch API を使用してリクエストの失敗をログに記録し、処理します。
19. フロントエンドとバックエンドの間で POST リクエストを保護するにはどうすればよいですか?
20. HTTPS を使用し、フロントエンドとバックエンドの両方で入力を検証し、適切な認証/認可メカニズムを適用します。

AJAX POST リクエストのトラブルシューティングのプロセスのまとめ

AJAX または Fetch を使用して JavaScript から Flask バックエンドにデータを送信するには、ヘッダーを正しく構成し、CORS を処理する必要があります。コンテンツ タイプがデータ形式と一致していることを確認すると、415 エラーが防止されます。 Flask のルートとプリフライト リクエストを管理する機能は、スムーズなデータ交換において重要な役割を果たします。

Postman などのツールを使用してバックエンドを個別にテストすると、問題を早期に特定するのに役立ちます。入力の検証や HTTPS の使用などのベスト プラクティスを採用することで、安全なデータ送信がさらに保証されます。これらのガイドラインに従うと、異なるプラットフォームでホストされている場合でも、フロントエンドと Flask バックエンド間の通信が向上します。