유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

CORS

Traversy Media

2025. 10. 11.

0

#frontend
#backend
  • CORS는 브라우저 보안 기능으로, 다른 도메인 간의 리소스 요청을 기본적으로 차단합니다. 🔒
  • 이 문제는 주로 프론트엔드 JavaScript가 다른 출처(origin)의 API에 접근하려 할 때 발생합니다. 🌐
  • 콘솔에 "No 'Access-Control-Allow-Origin' header is present" 오류가 나타나며, 이는 서버 응답에 해당 헤더가 없음을 의미합니다. 🚫
  • Postman이나 cURL 같은 직접적인 HTTP 클라이언트에서는 CORS 문제가 발생하지 않으며, 이는 브라우저에만 적용되는 보안 기능입니다. 🛠️
  • 해결책은 서버(예: Express API) 응답에 Access-Control-Allow-Origin 헤더를 추가하여 교차 출처 요청을 허용하는 것입니다. ✅
  • Access-Control-Allow-Origin: *는 모든 도메인에서의 요청을 허용하며, 특정 도메인으로 제한할 수도 있습니다. ✨
  • Access-Control-Allow-Methods (허용할 HTTP 메서드 지정) 및 Access-Control-Allow-Headers (프론트엔드에서 보낼 수 있는 헤더 지정, 예: Content-Type)도 함께 설정할 수 있습니다. ⚙️

Recommanded Videos