[Back-end] put, get, post, delete 방식별 RestAPI구현

RestAPI

[Back-end] flask로 Rest API 구현

다른 도메인에서 데이터 가져오기

[Back-end] CORS (Cross Origin Resource Sharing)

 

RestAPI Method 정의

백엔드 서버에서 요청된 데이터 방식에 따라 데이터를 출력하고

상태값이 True라는 데이터를 프론트 측으로 반환하도록 정의한다.

지원하는 메소드는 네가지 모두 적어준다.

• 라우팅에 methods 값의 디폴트는 get
• get, put, delete는 파라미터 추출형식이 같다.
• post만 다른 방식으로 파라미터를 추출
• 보통 get과 post방식을 사용한다.

Get으로 요청을 받을 시 예시이다.

요청이 get인 경우 조건문 안으로 들어와

get을 프린트 하여 해당 메소드 방식을 알려주며

요청받은 데이터를 user에 넣어 출력한다.

 

요청 이벤트 생성

다른 html문서에 각 메서드에 해당하는 버튼을 생성하고

Vue의 온클릭 이벤트를 등록한다.

각 이벤트를 정의해준다.

버튼에 해당하는 html method의 이름과

email값을 8082포트에 전달하며

8082에서 리턴받은 status값을 콘솔에 나타낸다.

나머지 두개의 put과 delete메소드 또한 이와같이 생성한다.

post방식만 email을 data로 전달하고

나머지 세 방식은 params로 전달한다.

 

흐름

get버튼을 클릭하면 test_get메서드가 호출된다.

8082포트로 method값에 get이, email파라미터값에 get@test.com이 넘어간다.

8082포트의 라우팅경로 /test에서 전달받은 method값이 get이므로

GET을 프린트하며

파라미터 email값을 user에 저장하고

user값을 프린트 하여 get@test.com이 출력된다.

 

그 후 jsonify함수를 통해 status값을 True로 리턴한다.

5500포트로 돌아와서 전달받은 status값인 true를 콘솔창에 나타내게 된다.

 

get & post의 차이

get방식으로 요청했을 시 마지막 줄과 같이 라우팅 경로에 파라미터 값이 적히는 것을 볼 수 있다.

이렇게 백엔드 서버의 주소창에 직접 파라미터를 넣어주어도

위와같이 값들이 전달이 된다.

반면 post방식은 경로에 단지 /test만 존재하는 것을 볼 수 있으며

경로에 파라미터를 넣어도 get방식으로 인식된다.

• html은 get과 post를 지원함
• get은 파라미터값이 주소창에 노출됨
• post는 파라미터 값이 body안에서 전달되므로 user입장에서 확인 불가능
• 정보를 노출하지 않는 측면에서 post방식이 선호됨