CORS 헤더 생성기

CORS 헤더 생성기 사용 가이드

다른 도메인의 프런트엔드가 API를 호출하면 브라우저는 서버의 CORS 응답 헤더를 보고 허용 여부를 정합니다. 이 도구는 허용 출처, 메서드, 요청 헤더와 옵션을 받아 Access-Control-Allow-* 헤더 묶음을 만들어 서버 설정에 바로 붙일 수 있게 합니다.

출처는 경로 없이 https://app.example.com처럼 적어야 하고, credentials=true(쿠키·인증 포함)와 * 출처는 브라우저가 함께 허용하지 않으므로 오류로 알려 줍니다. 특정 출처를 지정하면 캐시가 섞이지 않도록 Vary: Origin도 붙입니다.

출처를 여러 개 적으면 헤더에는 하나만 들어갈 수 있다는 점과, 요청의 Origin을 목록과 비교해 그대로 돌려줘야 한다는 처리 방법을 안내합니다. max-age가 Chrome의 상한인 7200초를 넘으면 그 사실도 함께 표시합니다.

사용 방법

1. 1'허용 출처' 칸에 https://app.example.com이나 *를 적습니다. 여러 개면 쉼표로 잇습니다.
2. 2'메서드' 칸에 GET, POST, OPTIONS처럼 적고, '세부 설정' 칸에 'Content-Type, Authorization; credentials=true; max-age=600'처럼 요청 헤더와 옵션을 적습니다.
3. 3'실행'을 누르면 응답 헤더 목록과 필요한 안내가 나옵니다.

https://app.example.com
---
GET, POST, OPTIONS
---
Content-Type, Authorization; credentials=true; max-age=600

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 600
Vary: Origin

이럴 때 쓰면 좋아요

• 프런트엔드와 API 도메인이 달라 브라우저 콘솔에 CORS 오류가 날 때
• Nginx·Express·Spring 설정에 넣을 CORS 헤더 값을 정리할 때
• 쿠키 인증을 쓰는 API의 credentials 설정이 맞는지 확인할 때
• 응답의 X-Total-Count 같은 헤더를 프런트엔드에서 읽어야 할 때

문제가 생겼을 때

활용 팁

• 헤더를 응답에 넣었는데도 오류가 나면 OPTIONS 사전 요청(preflight)에도 같은 헤더가 붙는지 개발자 도구의 네트워크 탭에서 확인하세요.
• Access-Control-Allow-Credentials는 true일 때만 의미가 있어 false일 때는 줄 자체를 넣지 않습니다.

자주 묻는 질문