← 기능 섹션으로 돌아가기
Free

CORS 검사기

CORS 검사기는 현재 사이트에서의 교차 출처(Cross-Origin) 요청이 대상 서버에서 허용되는지 테스트합니다. 프리플라이트(OPTIONS) 및 실제 요청을 실행하여 '허용됨/차단됨' 판정을 보고하며, Access-Control-Allow-Origin, Methods, Headers, Credentials 헤더를 세분화하여 요청이 실패하는 정확한 원인을 찾아냅니다.

"Blocked by CORS"은 브라우저 개발에서 가장 혼란스러운 오류 중 하나입니다. 브라우저는 코드에 유용한 정보를 반환하지 않고 조용히 요청을 차단하며, 원시 CORS 헤더를 읽는 것은 매우 번거롭습니다. CORS 검사기는 전체 상황을 명확하게 보여줍니다. 대상 URL, HTTP 메서드, 테스트하려는 출처(Origin, 기본값은 현재 페이지)를 입력하세요. 필요에 따라 보낼 커스텀 요청 헤더(content-type, authorization 등)를 나열할 수도 있습니다. 도구는 요청이 "단순"하지 않을 때 자동으로 프리플라이트(OPTIONS) 요청을 실행한 뒤 실제 요청을 보내고, 모든 관련 CORS 응답 헤더를 파싱합니다. 그런 다음 Allow-Origin이 올바르게 설정되었는지, Allow-Methods에 해당 메서드가 포함되었는지, Allow-Headers에 커스텀 헤더가 있는지, Allow-Credentials가 자격 증명 플래그와 일치하는지 등의 항목별 통과/실패 내역을 렌더링합니다. 최종 판정은 '허용(ALLOWED)' 또는 '차단(BLOCKED)'으로 명확하게 제시되며, 항목별 리스트는 백엔드에서 무엇을 수정해야 하는지 정확히 알려줍니다.

라이브 미리보기
example.com
CORS 검사기 ✓ 테스트 완료
POST https://api.backend.com/users
Origin:https://app.example.com Headers:content-type,authorization
✓ 요청이 허용됩니다
체크 항목
Allow-Origin이 https://app.example.com과 일치함
POST 메서드가 허용됨
요청 헤더가 Allow-Headers에 의해 허용됨
프리플라이트 (OPTIONS) · 204 No Content
access-control-allow-origin: https://app.example.com
access-control-allow-methods: GET, POST, PUT, DELETE
access-control-allow-headers: content-type, authorization
access-control-max-age: 86400
주요 기능

자동 프리플라이트 감지

단순하지 않은 메서드나 커스텀 헤더로 인해 프리플라이트(OPTIONS) 요청이 필요한 경우를 감지하여, 올바른 Access-Control-Request-* 헤더와 함께 자동으로 실행합니다.

항목별 세부 분석

출처 일치 여부, 허용된 메서드, 허용된 헤더, 자격 증명 등 각 CORS 규칙을 개별적으로 평가합니다. 어떤 단계에서 실패했는지 정확히 확인할 수 있습니다.

명확한 최종 판정

상단에 커다란 초록색 '허용됨(ALLOWED)' 또는 빨간색 '차단됨(BLOCKED)' 배너를 표시합니다. 헤더를 일일이 읽어 답을 찾을 필요가 없습니다.

전체 헤더 검사

프리플라이트 및 실제 요청에서 수신된 모든 응답 헤더를 보여주며, CORS 관련 헤더는 하이라이트됩니다.

커스텀 출처 테스트

현재 페이지뿐만 아니라 임의의 출처인 것처럼 가장하여 테스트할 수 있습니다. 서드파티 연동 시 어떻게 처리될지 미리 확인하는 데 유용합니다.

백그라운드 실행 방식

검사 로직이 확장 프로그램의 백그라운드에서 실행되므로, 호스트 페이지의 CORS 정책에 의해 교차 출처 fetch가 차단되지 않습니다.

주요 활용 사례

"Blocked by CORS" 오류 디버깅

프론트엔드 콘솔에 CORS 오류가 뜰 때, 이 도구를 사용하여 백엔드에 누락된 헤더가 무엇인지 확인하세요. 명세서를 읽는 것보다 훨씬 빠릅니다.

API CORS 설정 검증

새로운 공개 API를 배포하기 전에, 예상되는 모든 출처, 메서드, 헤더 조합이 정상 작동하는지 도구를 통해 미리 테스트하세요.

서드파티 연동 테스트

서드파티 API를 연동할 때, 실제 사용할 헤더를 포함하여 자신의 출처에서 요청이 정상적으로 통과되는지 미리 확인하세요.

프리플라이트 캐시 디버깅

Access-Control-Max-Age 값을 확인하여 브라우저가 프리플라이트 결과를 얼마나 오래 캐싱할지 파악하세요. 헤더 변경 후 테스트할 때 유용합니다.

환경별 교차 테스트

개발, 스테이징, 운영 URL에 대해 동일한 CORS 테스트를 실행하여, 사용자가 발견하기 전에 환경별 설정 오류를 먼저 찾아내세요.

사용법
1

CORS 검사기 열기

DevSuite Pro 독에서 CORS 아이콘을 클릭합니다. URL, 메서드, 출처, 헤더 입력란이 있는 패널이 열립니다.

2

대상 URL 및 메서드 입력

테스트할 API 엔드포인트를 붙여넣고 HTTP 메서드(GET, POST, PUT, DELETE 등)를 선택하세요.

3

출처 및 헤더 설정

출처(Origin)는 기본적으로 현재 페이지로 설정됩니다. 다른 출처를 테스트하려면 변경하세요. 커스텀 요청 헤더는 쉼표로 구분하여 나열합니다.

4

CORS 테스트 클릭

도구가 필요한 경우 프리플라이트를 실행하고 실제 요청을 보낸 뒤, 최종 판정과 세부 항목별 결과를 렌더링합니다.

5

확인 및 수정

'차단됨(BLOCKED)'인 경우, 항목별 리스트에서 서버 응답에 누락된 내용을 확인하세요. 백엔드 헤더를 수정한 후 다시 테스트합니다.

시작할 준비가 되셨나요?

DevSuite Pro를 무료로 설치하고 브라우저용 64개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가