CORS란? (Cross-Origin Resource Sharing)

🌍 CORS가 뭔가?

• CORS는 '다른 출처(Origin) 간의 리소스 공유'를 허용할지 말지 서버가 결정하는 정책이야.

웹 브라우저는 보안 때문에 기본적으로, 다른 출처(Origin) 에 요청을 보내는 걸 차단한다.

여기서 "출처(Origin)"는 다음 3가지를 합쳐:

 

프로토콜 + 도메인 + 포트
예시:

• https://example.com:443 과
• http://example.com:80 은 다른 출처야 (프로토콜이 다름).
• https://api.example.com 은 도메인 자체가 다르니까 당연히 다른 출처고.

 

📦 예를 들어볼게

너의 프론트엔드 (Next.js, React 등)가
http://localhost:3000에서 동작 중인데,

서버(API) 가
http://localhost:8080 에 있다면,
서로 포트번호가 다르기 때문에 "다른 출처" 이야.

그래서 그냥 AJAX 요청(axios, fetch 등)을 보내면, 브라우저는:

❌ "어? 다른 출처잖아? 보안상 막아야겠다!"

라고 막아버려.

이때 서버가 "괜찮아, 이 출처는 허락할게" 라고
응답 헤더에 특정 정보를 담아줘야 통과할 수 있어.
그게 바로 CORS 설정이야.

 

🎯 서버가 보내야 하는 CORS 헤더 예시

Access-Control-Allow-Origin: http://localhost:3000

이런 식으로 서버가 허용하면 브라우저는 요청을 허락해.

 

또 추가적으로,

Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

 

🛡️ 왜 이런 제약이 필요한가?

웹 보안 때문에.
아무 사이트나 사용자의 인증정보(cookies, tokens 등)를
마구 가져가는 걸 막으려고.

 

🚀 개발자가 흔히 하는 일

• 백엔드(Spring Boot, Node.js 등)에서
  Access-Control-Allow-Origin: * (모든 출처 허용)을 설정하거나
• 특정 도메인만 허용하기 (localhost:3000, mydomain.com 등)

개발환경에서는 주로 "모든 출처 허용" (*) 해놓고,
운영환경에서는 "특정 출처만 허용" 해서 보안을 강화해.

 

📋 정리

질문	답
CORS란?	다른 출처에서 요청하는 걸 허락할지 말지 서버가 정하는 정책
왜 필요해?	보안을 위해 (다른 사이트가 내 데이터 막 가져가는 걸 방지)
어떻게 해결해?	서버가 응답 헤더에 Access-Control-Allow-Origin 등을 넣어줘야 함

 

📢 주의사항

• CORS는 클라이언트(브라우저)에서 막는 거야. 서버 문제는 아님.
• 서버가 제대로 설정 안 해주면, 브라우저가 요청 자체를 막아버려.
• Postman 같은 툴은 CORS 무시하고 바로 통신 가능해 (브라우저에서만 CORS 체크함).