🌿 중급 백엔드
CORS가 뭔가요?
쉽게 이해하기
편의점에서 물건을 살 때 신분증을 확인하는 것처럼, 브라우저도 다른 웹사이트의 데이터를 가져올 때 '이 사이트가 정말 요청할 권한이 있나?' 확인해요. 예를 들어 yourdomain.com에서 api.example.com의 데이터를 가져오려면, api.example.com이 '네, yourdomain.com은 우리 데이터를 가져가도 돼요'라고 허락해줘야 해요.
핵심 정리
다른 사이트의 데이터를 가져올 때 브라우저가 안전을 위해 확인하는 정책이에요.
자세히 알아보기
CORS는 Cross-Origin Resource Sharing의 약자로, 다른 출처(도메인)의 리소스를 안전하게 공유하기 위한 브라우저 보안 정책이에요.
실무에서는 프론트엔드(localhost:3000)와 백엔드(api.example.com)가 다른 도메인일 때 자주 마주쳐요. 프론트에서 API를 호출했는데 'CORS policy 에러'가 뜬다면, 백엔드 서버 설정에서 특정 도메인을 허용해줘야 해요. 예를 들어 Express.js에서는 cors 미들웨어를 설치해서 'app.use(cors())'처럼 설정하거나, 특정 도메인만 허용할 수도 있어요.
CORS는 브라우저가 보안을 위해 자동으로 체크하는 거라서, Postman이나 서버에서 직접 요청할 때는 에러가 안 나요. 오직 브라우저에서 JavaScript로 다른 도메인에 요청할 때만 발생해요.
개발할 때는 프록시 설정이나 'Access-Control-Allow-Origin' 헤더로 해결하고, 배포 후에는 실제 도메인을 서버 설정에 추가해줘야 해요. CORS를 이해하면 '왜 로컬에서는 되는데 배포하면 안 되지?'같은 문제를 빠르게 해결할 수 있어요.