Flask 및 Ajax 게시물 HTTP 400 잘못된 요청 오류

Flask 및 Ajax 게시물 HTTP 400 잘못된 요청 오류

나는 작은 플라스크 기반 사이트를 작성하고 있으며, Ajax를 사용하여 클라이언트에서 서버로 데이터를 전송하고 싶습니다.나는 지금까지 Ajax 요청을 서버에서 데이터를 검색하는 데만 사용했습니다.이번에는 POST 요청을 통해 자료를 제출하고자 합니다.

이것은 플라스크 쪽의 수신기입니다. 이 경로의 구현에서 불필요한 오류를 방지하기 위해 메시지를 거의 기록하지 않도록 축소했습니다.

@app.route("/json_submit", methods=["POST"])
def submit_handler():
    # a = request.get_json(force=True)
    app.logger.log("json_submit")
    return {}

아약스 요청을 제출할 때 플라스크에서 400 오류가 발생합니다.

127.0.0.1 - - [03/Apr/2014 09:18:50] "POST /json_submit HTTP/1.1" 400 -

브라우저의 웹 개발자 콘솔에서도 확인할 수 있습니다.

플라스크가 호출되지 않는 이유submit_handler요청서에 제공된 데이터와 함께?

 var request = $.ajax({
    url: "/json_submit",
    type: "POST",
    data: {
      id: id, 
      known: is_known
    },  
    dataType: "json",
  })  
   .done( function (request) {
  })

Flask-WTF CSRF 보호를 사용하는 경우 보기를 면제하거나 AJAX POST 요청에 CSRF 토큰을 포함해야 합니다.

예외는 장식가를 사용하여 수행됩니다.

@csrf.exempt
@app.route("/json_submit", methods=["POST"])
def submit_handler():
    # a = request.get_json(force=True)
    app.logger.log("json_submit")
    return {}

토큰을 AJAX 요청에 포함하려면 토큰을 페이지 어딘가에 삽입합니다.<meta>머리글 또는 생성된 JavaScript에서 다음을 설정합니다.X-CSRFToken표제의jQuery를 사용할 때는 후크를 사용합니다.

메타 태그 사용 예(Flask-WTF CSRF 설명서 참조):

<meta name="csrf-token" content="{{ csrf_token() }}">

그리고 당신의 JS 코드 어딘가에:

var csrftoken = $('meta[name=csrf-token]').attr('content')

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken)
        }
    }
})

핸들러가 아직 JSON 데이터를 게시하지 않았습니다. 여전히 일반 URL 인코딩 상태입니다.POST(데이터는 결국 다음과 같습니다.request.form플라스크 쪽); AJAX 콘텐츠 유형을 다음으로 설정해야 합니다.application/json및 사용JSON.stringify()실제로 JSON을 제출하기 위해:

var request = $.ajax({
   url: "/json_submit",
   type: "POST",
   contentType: "application/json",
   data: JSON.stringify({
     id: id, 
     known: is_known
   }),  
})  
  .done( function (request) {
})

이제 이 방법으로 데이터를 파이썬 구조로 액세스할 수 있습니다.

그dataType: "json",에 대한 매개 변수.$.ajax보기에서 JSON을 반환하는 경우에만 필요합니다(예: JSON 응답을 생성하는 데 사용됨).jQuery는 응답 처리 방법을 알려줍니다.

이렇게 해보시겠어요.

var request = $.ajax({
    url: "/json_submit",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({
      id: id, 
      known: is_known
    }),  
    dataType: "json",
  })  
   .done( function (request) {
 })

그 전에 코드에서 dict 개체를 반환합니다.그것은 정확하지 않습니다.그것은 json을 like로 반환합니다.

@app.route("/json_submit", methods=["POST"])
def submit_handler():
    # a = request.get_json(force=True)
    app.logger.log("json_submit")
    return flask.jsonify({'msg': 'success'})

jQuery가 필요 없는 유사 솔루션

<meta name="csrf-token" content="{{ csrf_token() }}">

var beforeSend = function(xhr) {
    var csrf_token = document.querySelector('meta[name=csrf-token]').content;
    xhr.setRequestHeader("X-CSRFToken", csrf_token);
};

function fooFunction() {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/json-submit");
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // Do what you want with this.responseText
        }
    };
    beforeSend(xhr);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify({
        'id': id, 'known': is_known
    }));
};

언급URL : https://stackoverflow.com/questions/22854749/flask-and-ajax-post-http-400-bad-request-error