브라우저에서 POST Method 호출하기

이애옹·2024년 4월 15일
0
post-custom-banner

❌ 에러확인 및 원인분석

현재 API 서버를 만들어서 로컬에서 테스트를 하고 있는데,
브라우저 주소창에서 GET 방식의 api만 테스트를 하다가 POST 방식의 api를 테스트 해 보려고 하니

Cannot GET /api

이런 에러가 계속 발생했다!!!

분명 POST 방식으로 api를 만들었는데 왜 자꾸 저런 에러가 뜨나 확인 해 봤더니
브라우저에서 직접 주소를 입력하여 테스트 하는건 GET 요청이 전송된다고 한다🤨

테스트 할 화면을 만들어도 되고 postman같은 프로그램을 이용해도 되긴 하지만
귀찮기 때문에 브라우저를 이용해 post api를 테스트 하는 방법을 찾아봤다.

📝 브라우저 console창을 이용해 POST method 호출하기

일단 브라우저를 연 뒤, 개발자 도구 내 console창에 다음과 같은 명령을 입력하면 된다


client=new XMLHttpRequest();
client.open('POST', "POST_METHOD_URL", true);
client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");



// 파라미터가 없을 경우
client.send();		

// 파라미터가 있을 경우
// var param = 'id=1'  
// client.send(param);	

XMLHttpRequest() : 비동기식 통신 객체로 서버 요청 시 사용
client.open(전송방식, url, sync) : 서버로 보낼 요청의 형식 설정(true는 동기, url은 테스트 할 경로 입력)
client.setRequestHeader : POST 방식 사용 시 헤더 설정, 필요한 헤더를 호출한다.
client.send(param) : 서버로 요청 실행, 파라미터가 있다면 세팅하여 호출한다.

참고로, 전송 파라미터가 여러개일경우 var param = 'id=1&name=홍길동' 이런식으로 처리하면 된다.

이렇게 콘솔창에 날리면 post 명령이 정상적으로 수행되는걸 확인 할 수 이따

나는 쿼리가 실행된걸로 결과를 확인 해 볼수 있긴 했는데,
client.status 명령으로 상태값이 200으로 정상 호출되는것도 확인 가능했다.

api 서버를 이용한 작업은 처음이라서 이런게 있는지 몰랐는데 ㅎㅎ 신기함

👀 참고자료

profile
안녕하세요
post-custom-banner

0개의 댓글