CORS (Cross-Origin Resource Sharing)

🟡 CORS(Cross-Origin Resource Sharing)란?

<aside> 💡

다른 출처(Origin) 간의 자원 공유를 브라우저에서 허용하도록 정의한 보안 정책

즉, 브라우저가 보안상의 이유로 외부 도메인의 리소스 접근을 기본적으로 막는 것을 제어하는 방법

</aside>

출처(Origin)란?

출처는 다음 3가지로 구성됩니다:

구성 요소	예시
스킴	http, https
호스트	www.example.com
포트	:3000, :8080

이 셋 중 하나라도 다르면 **다른 출처(Other Origin)**간주됨.

🔍 예시

요청 URL	같은 출처인가?
http://localhost:3000 → http://localhost:3000	✅ 같은 출처
http://localhost:3000 → http://localhost:4000	❌ 다른 포트
http://example.com → https://example.com	❌ 다른 스킴
http://example.com → http://api.example.com	❌ 다른 호스트

🚫 CORS 에러 예시

Access to fetch at '<http://api.example.com/data>' from origin '<http://localhost:3000>'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...

해결 방법

1. 서버에서 CORS 허용 헤더 추가

서버 응답 헤더에 아래와 같은 설정을 추가하면 해결됨:

Access-Control-Allow-Origin: <http://localhost:3000>
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization