MODOO HUB ← 모두의 툴
Developer · Instrument

API 테스터

브라우저에서 HTTP API 요청 즉시 테스트

Headers

📖 CORS 에러 vs 네트워크 오류 가이드 보기

API 테스터란?

브라우저 내장 fetch()로 HTTP API 요청을 직접 보냅니다. 메서드·헤더·JSON 본문을 구성해 요청을 보내면 응답 상태 코드, 응답 헤더, 바디를 즉시 확인할 수 있고, 응답 Content-Type이 application/json이면 자동으로 들여쓰기해 보여줍니다. 요청 본문은 POST·PUT·PATCH뿐 아니라 DELETE에도 입력한 대로 전송됩니다 — DELETE도 HTTP 스펙상 본문을 가질 수 있고 일부 API(대량 삭제 등)가 실제로 이를 사용하기 때문입니다. 요청이 실패하면 브라우저는 보안상의 이유로 "CORS 정책에 막힌 것"과 "URL 오타·서버 다운·네트워크 단절 같은 순수 연결 실패"를 구분해서 알려주지 않고 똑같이 TypeError만 던지므로, 이 도구도 두 경우를 하나의 안내 메시지로 함께 보여드립니다. 모든 요청은 이 사이트 서버를 거치지 않고 브라우저에서 API 서버로 직접 전송됩니다.

자주 묻는 질문

CORS 오류가 발생하는 이유는?

브라우저는 페이지와 다른 오리진(도메인·포트·프로토콜)의 API를 fetch로 호출할 때, 응답에 Access-Control-Allow-Origin 헤더가 없으면 응답 내용을 자바스크립트에 넘기지 않고 차단합니다. 서버가 이 헤더를 명시적으로 설정해야 브라우저에서 직접 호출할 수 있습니다.

"요청 실패" 메시지가 뜨면 항상 CORS 문제인가요?

아닌 경우도 많습니다. fetch()는 보안 정책상 CORS 차단과 순수 네트워크 오류(URL 오타, 서버 다운, DNS 실패, HTTPS 페이지에서 HTTP API 호출 등)를 구분해서 알려주지 않고 둘 다 동일한 TypeError로 처리합니다. 그래서 이 도구도 원인을 하나로 특정하지 않고, 두 가능성을 모두 안내하는 메시지를 보여줍니다.

DELETE 요청에도 본문을 보낼 수 있나요?

네. HTTP 스펙상 DELETE도 본문을 가질 수 있으며, 대량 삭제처럼 삭제 대상 목록을 본문에 담아 받는 API가 실제로 존재합니다. 이 도구는 POST·PUT·PATCH와 동일하게 DELETE를 선택했을 때도 입력한 본문을 그대로 전송합니다.

인증이 필요한 API도 테스트할 수 있나요?

Authorization 헤더에 Bearer Token 또는 API 키를 추가해 테스트할 수 있습니다. 헤더 행을 추가해 Key/Value를 입력하면 됩니다.

응답 JSON이 자동으로 포맷되나요?

응답 본문을 JSON.parse로 시도해 성공하면 2칸 들여쓰기로 재포맷합니다. 실패하면(HTML, 텍스트 등) 원본 그대로 표시합니다.

전송된 데이터는 안전한가요?

요청은 브라우저에서 API 서버로 직접 전달되며 이 사이트의 서버를 경유하지 않습니다. 단, 입력한 URL·헤더·본문(토큰 등 민감정보 포함)은 브라우저 메모리에만 존재하고 새로고침하면 사라집니다.

응답 헤더를 모두 볼 수 있나요?

아니요. CORS 명세상 브라우저는 기본적으로 Cache-Control, Content-Type 등 일부 "안전한" 헤더만 자바스크립트에 노출하며, 서버가 Access-Control-Expose-Headers로 명시하지 않은 커스텀 헤더는 보이지 않습니다.

요청 시간 초과가 있나요?

이 도구 자체는 타임아웃을 걸지 않으며, 브라우저의 기본 fetch 타임아웃 동작을 따릅니다. 응답이 매우 오래 걸리는 API는 무기한 대기할 수 있습니다.