JavaScript가 AJAX POST 요청을 Flask 백엔드로 보낼 때 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 지원되지 않는 미디어 유형 오류를 어떻게 해결합니까?
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 백엔드 간의 더 나은 통신이 가능해집니다.