본문 바로가기

개발 공부

CORS란?

CORS란 Cross-Origin Resource Sharing의 약자

웹 페이지가 다른 도메인의 자원에 접근할 수 있게 하는 보안 메커니즘.

기본적으로 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 사용하여, 스크립트가 다른 출처(도메인, 프로토콜, 포트)의 리소스와 상호 작용하는 것을 제한한다.

(프로젝트를 할 때 CORS에러가 뜨면 컴퓨터 부셔버리고 싶었다.)

 

CORS를 구현하는 방법은 아래와 같다.

  1. 서버 측 설정: 서버는 Access-Control-Allow-Origin 헤더를 사용하여 특정 출처(또는 모든 출처)의 접근을 허용할 수 있습니다. 예를 들어, 서버가 `Access-Control-Allow-Origin: *`를 응답 헤더에 포함시키면 모든 출처의 요청을 허용하게 된다.
  2. 사전 요청 (Preflight Request): 복잡한 요청(예: PUT, DELETE, 또는 특정 헤더가 있는 요청)을 보낼 때, 브라우저는 OPTIONS 메소드를 사용하여 사전 요청을 보낸다. 이 요청은 실제 요청을 보내기 전에 서버가 요청을 허용하는지 확인하는 데 사용된다.
  3. 응답 헤더: 서버는 Access-Control-Allow-Methods, Access-Control-Allow-Headers 등의 헤더를 통해 어떤 HTTP 메소드와 헤더를 허용할지 명시할 수 있다.
  4. 프록시 서버 사용: 클라이언트와 서버 사이에 프록시 서버를 두어 CORS 관련 헤더를 추가할 수도 있다. 이 방법은 서버의 설정을 바꿀 수 없는 경우에 유용하다.
  5. 클라이언트 측 설정: 일부 경우에는 클라이언트(예: 웹 브라우저)의 설정을 변경하여 CORS 정책을 우회할 수 있다. 하지만 이는 보안 문제를 야기할 수 있으므로 일반적인 해결책으로 권장되지 않는다.

CORS는 웹 애플리케이션의 보안을 유지하면서도 다양한 출처의 자원을 통합할 수 있게 해주는 중요한 기능이다. 그러나 이러한 CORS를 모르고 개발을 한다면 수 많은 에러와 직면해 눈물을 머금고 부랴부랴 찾지 말고 미리미리 공부해 두는 것이 좋을 듯 하다.

'개발 공부' 카테고리의 다른 글

MVC 모델?  (0) 2024.01.19
HTTP, HTTPS?  (0) 2024.01.17
라이프사이클(클래스형 vs 함수형), react hooks  (0) 2023.05.01
React에서 State, Props, 리렌더링 발생 조건 및 성능 최적화  (0) 2023.04.24
React Component -2  (0) 2023.04.20