브라우저에서 POST 요청보내는 방법

cini·2025년 8월 5일

기타

목록 보기

2/3

Postman을 사용하지 않고 그냥 웹브라우저에서 요청 테스트를 하고 싶을 때,
GET요청의 경우 주소창에 localhost:8080/ 이런식으로 검색만 하면 된다. 하지만 POST요청은 클릭해서는 어렵고 1. 'HTML form'을 만들어서 POST 방식으로 보내거나. 2. 브라우저 개발자 도구를 열어서 fetch API를 사용해서 POST 요청을 보내거나 3. CLI 요청하거나(curl) 4. 자동화 스크립트(ex. Javascript) 통해서 보내면 된다.

우선 "http://localhost:8080/api/v1/auth/kakao" URL로 GET이 아닌 POST 요청을 웹브라우저로 보내는 방법으로 살펴볼 것이고, 그 세 가지 방식에 대해서 간단하게 정리해보고자 한다.
~~추천하는 것만 보고싶다면 2번, 3번만 보고 따라하면 된다.~~

1. 단순 HTML `<form>` 사용

간단하면서(form에 맞게 넣으면 되기 떄문) 브라우저 네이티브 방식이다.

핵심은 method="post" 이다.

<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>POST Test</title></head>
<body>
  <form action="http://localhost:8080/api/v1/auth/kakao" method="post">
    <!-- 필요하다면 파라미터를 hidden 필드로 -->
    <input type="hidden" name="code"  value="AUTH_CODE">
    <button type="submit">POST 전송</button>
  </form>
</body>
</html>

위 내용을 post-test.html같은걸로 저장해두고 더블클릭해서 브라우저로 연 후에 버튼 누르면 POST요청을 전송한다.
다만, 이 부분은 Content-Type이 기본적으로 application/x-www-form-urlencoded라서 JSON으로 하고싶다면 2번 방식이 더 편하다.

2. 개발자 도구 콘솔에서 fetch() 사용 👍

브라우저에 이미 내장된 Fetch API 로 직접 호출하는 방식이다.

fetch('http://localhost:8080/api/v1/auth/kakao', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'   // JSON을 보낼 때
  },
  body: JSON.stringify({ code: 'AUTH_CODE' })
})
  .then(res => res.json())   // 응답이 JSON 이라면
  .then(console.log)
  .catch(console.error);

chrome이나 firefox 등 브라우저에서 f12누르고 개발자 도구 열어서 Console 탭 열어서 붙여넣으면 된다.

위 오류는 단순 경고 메세지이고 allow pasting이라 치고 엔터치면 복사 붙여넣기 가능하다.

3. curl·httpie 같은 CLI 도구 👍👍

CLI 도구만으로 POST http://localhost:8080/api/v1/auth/kakao 에 JSON 바디·헤더를 넣어 테스트하는 방식도 추천한다.

이전에 크롤링 작업할 때도 그렇고 Robots.txt 파일(크롤링할 수 있는 범위 알기 위해서) 확인 후, 터미널로 curl 요청보내서 내가 궁금한 데이터를 조회했던 기억이 있어서 한번 정리해봤다. 개발자라면 필요할 때 이런 작업들을 해야 하니까 알아두면 좋다.

# 1-1) 한 줄로 바로 보내기
curl -X POST \
  -H "Content-Type: application/json" \
  -d '{"code": "AUTH_CODE"}' \
  http://localhost:8080/api/v1/auth/kakao

스위치	의미
`-X POST`	요청 메서드 지정
`-H`	헤더 추가(여러 번 가능)
`-d` 또는 `--data`	바디 지정. 앞에 `@` 붙이면 파일 업로드

아래처럼 터미널 열어서 이렇게 요청 보내면 된다.
가끔 macOS는 보안문제 때문에 어떤 옵션을 넣어줬어야했다.

4. HTML+JS 직접 핸드메이드 호출

~~개인적으로 사실 이렇게까지 요청할거라면 사실 postman 툴 활용해서 물어보는 것도 좋을 거 같다,,~~

<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>Kakao Auth POST</title></head>
<body>
  <button id="send">POST /auth/kakao</button>

  <script>
    document.getElementById('send').onclick = async () => {
      const res = await fetch('http://localhost:8080/api/v1/auth/kakao', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: 'AUTH_CODE' })
      });
      console.log(await res.json());
    };
  </script>
</body>
</html>