HTTP 요청 빌더
URL·헤더·파라미터·본문 → cURL / fetch 코드 생성
HTTP 요청 빌더란?
URL, HTTP 메서드, 쿼리 파라미터, 헤더, 요청 본문을 시각적으로 설정하고 cURL, fetch(), axios 코드를 자동 생성합니다. API 문서 작성, 팀 협업, 학습 목적에 유용합니다.
자주 묻는 질문
실제로 API를 호출하나요?
HTTP 요청 빌더는 코드만 생성합니다. 실제 호출은 api-tester 도구를 사용하세요.
쿼리 파라미터는 자동으로 URL에 추가되나요?
네. Key-Value로 입력한 파라미터는 자동으로 인코딩되어 URL에 추가됩니다.
fetch() 코드를 바로 사용할 수 있나요?
모던 브라우저나 Node.js 18+ 환경에서 바로 사용 가능합니다.
Bearer Token은 어떻게 추가하나요?
헤더에 Authorization: Bearer {token}을 직접 입력하세요.
form-data 본문도 지원하나요?
현재는 JSON 본문만 지원합니다. multipart form-data는 추후 지원 예정입니다.
axios 코드도 생성되나요?
네. axios 탭에서 axios 스타일의 요청 코드를 확인할 수 있습니다.
URL 인코딩은 자동으로 처리되나요?
쿼리 파라미터 값은 encodeURIComponent로 자동 인코딩됩니다.
복수의 헤더를 추가할 수 있나요?
+ Add 버튼으로 원하는 만큼 헤더를 추가할 수 있습니다.
POST + JSON 본문 + Bearer 인증 조합의 3종 코드는 어떻게 다른가요?
동일한 요청도 라이브러리마다 문법이 다릅니다.
cURL: curl -X POST https://api.example.com/users -H "Authorization: Bearer TOKEN" -H "Content-Type: application/json" -d '{"name":"Kim"}'
fetch: fetch(url,{method:'POST',headers:{Authorization:'Bearer TOKEN','Content-Type':'application/json'},body:JSON.stringify({name:'Kim'})})
axios: axios.post(url,{name:'Kim'},{headers:{Authorization:'Bearer TOKEN'}}) — axios는 Content-Type과 JSON.stringify를 자동 처리해 코드가 더 짧습니다.
CORS 프리플라이트(OPTIONS)는 언제 발생하나요?
브라우저는 다음 중 하나라도 해당하면 실제 요청 전 OPTIONS 프리플라이트를 먼저 보냅니다: ① 메서드가 GET/HEAD/POST가 아닌 경우(PUT, DELETE, PATCH 등) ② Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 셋 중 하나가 아닌 경우(예: application/json) ③ Authorization, X-Custom-Header 등 CORS-safelisted가 아닌 커스텀 헤더를 추가한 경우. 세 조건을 모두 피하면(GET/POST + 기본 Content-Type + 표준 헤더만) 프리플라이트 없이 simple request로 처리됩니다.
자주 틀리는 Content-Type 실수는?
① JSON 본문을 보내면서 Content-Type을 지정하지 않아 서버가 text/plain으로 파싱 ② form-urlencoded로 보내야 할 로그인 폼에 application/json을 지정해 400 에러 ③ 파일 업로드 시 boundary가 자동 생성되는 multipart/form-data를 수동으로 헤더에 고정 지정해 파싱 실패 ④ GET 요청에 불필요하게 Content-Type을 넣어 일부 서버가 본문 존재로 오인 ⑤ charset=UTF-8 누락으로 다국어 텍스트 깨짐 ⑥ PATCH 요청에 application/json 대신 application/merge-patch+json이 필요한 API 규격을 놓침.