툴스모아

CORS 테스터

CORS(Cross-Origin Resource Sharing) 정책을 테스트하고 API 요청을 확인합니다

요청 설정
테스트할 API 요청을 설정하세요
예제 요청
미리 정의된 API 요청을 사용해보세요
CORS 정보
CORS에 대한 기본 정보

CORS란? CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 스크립트가 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다.

주요 CORS 헤더

  • Access-Control-Allow-Origin: 어떤 출처에서 리소스에 접근할 수 있는지 지정
  • Access-Control-Allow-Methods: 허용되는 HTTP 메서드 지정
  • Access-Control-Allow-Headers: 허용되는 HTTP 헤더 지정
  • Access-Control-Allow-Credentials: 인증 정보(쿠키, HTTP 인증)를 포함할 수 있는지 지정

💡 CORS 문제 해결 방법

서버 측 해결책

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

클라이언트 측 해결책

1. 프록시 서버 사용:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP 사용 (GET만 가능):

// 제한적이지만 간단한 해결책
          fetch('api?callback=handleResponse')

🔧 개발 환경별 CORS 설정

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

개발 환경별 CORS 설정

테스트 시나리오

  • • Simple Request: GET 요청으로 기본 CORS 동작 확인
  • • Preflight Request: PUT/DELETE 요청으로 사전 요청 확인
  • • Custom Headers: Authorization 헤더 포함 요청 테스트
  • • Credentials: 쿠키 포함 요청 테스트
  • • Error Handling: 실패 시나리오 테스트

보안 고려사항

  • • 와일드카드(*) 사용 시 보안 위험 고려
  • • 최소 권한 원칙: 필요한 출처와 메서드만 허용
  • • 자격 증명 제한: 인증 정보 포함 시 특정 출처만 허용
  • • 정기적 검토: CORS 정책을 주기적으로 검토 및 업데이트

CORS 디버깅 팁

브라우저 개발자 도구

  • • Network 탭에서 OPTIONS 요청 확인
  • • Console에서 CORS 오류 메시지 확인
  • • Response Headers에서 CORS 헤더 확인

유용한 도구

  • • CORS Tester (현재 도구)
  • • Postman (API 테스트용)
  • • curl 명령어 (서버 직접 테스트용)