[flask] Ajax로 json 데이터 post 전달시 flask 서버 get_json() 관련 오류 해결 방법

Ajax로 서버와 비동기 통신을 할 때 보통 json 데이터 형식으로 데이터를 주고 받습니다. 원래는 아래와 같이 클라이언트단 코드를 작성하고 서버단 코드를 작성해도, 문제 없이 클라이언트가 보내는 데이터를 서버에서 잘 받았습니다. 

 

안 되는 코드

클라이언트

$.ajax({
  type: "POST",
  url: "{{url_for('hello')}}",
  contentType: 'application/json',
  dataType: 'JSON',
  data: {
  	num: 1
  },
  success: function(report){
    console.log('성공');
  }

});

 

서버

@app.route("/hello", methods=["POST"])
def hello():
    req = request.get_json()
    num = req['num']
    print(num)

    res = make_response(jsonify({'message':'성공'}), 200)
    return res

 

그런데 오늘 위와 같은 방식으로 코드를 짰더니 자꾸 400 오류가 나고 클라이언트가 보낸 데이터를 서버가 받지 못하였습니다.

 

 

참고로 4xx 응답 상태 코드는 클라이언트가 요청을 잘못했을 때 생기는 에러입니다. 

- HTTP 상태 코드

 

'원래 되었던 코드로 기억하는데 왜 안되지?' 한참 헤매다가 결국 해결법을 찾았습니다. 

 

되는 코드

클라이언트

해결법은 보낼 데이터를 먼저 변수로 선언한 다음에 그것을 JSON.stringfy 함수 처리한 것을 보내는 것입니다. 

var test = {'num':1}

$.ajax({
  type: "POST",
  url: "{{url_for('hello')}}",
  contentType: 'application/json',
  dataType: 'JSON',
  data: JSON.stringfy(test),
  success: function(report){
    console.log('성공');
  }

});

 

서버

서버 코드는 위와 동일합니다. 

 

이렇게 클라이언트단의 코드를 수정해줬더니 정상적으로 서버로 데이터가 전송되었습니다. 혹시 같은 문제로 헤매고 계신 분들에게 이 글이 도움이 되길 바랍니다.