CORS 설정이란?

coding S's avatar
Mar 20, 2024
CORS 설정이란?

Options (XXXXXX)

옵션은 엄청 거대한거라 지금 알 필요 xxx 하지 마라!
notion image
 

[ CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) ]

웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 브라우저에서 제공하는 보안 메커니즘. 기본적으로, 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 따른다. 이 정책은 보안상의 이유로 웹 페이지가 다른 출처(origin) (도메인, 프로토콜, 포트가 모두 같아야 같은 출처(origin)로 인정)의 리소스에 접근하는 것을 제한하는데 CORS로 다른 출처(origin)에서 자신의 리소스에 접근할 수 있도록 허용할 수 있다. -> 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조
💡
그냥 쉽게 말하면… origin이 다른데 자바 스크립트로 요청이 오잖아? 으악 자바 스크립트!! 더러워!!! 해킹 위험!!! 하고 모두 블락을 한다. 이렇게 블락 당하지 않게 origin이 일치하지 않는 도메인을 접근 허용 해주는게 CORS 자바 스크립트 외 자바, C 이런 요청은 블락 당하지 않는다. why? 해킹은 자바 스크립트로 오기 때문에
💡
CORS 개념은 이걸로 끝. 밑에 더 안 봐도 될 듯 함
 

[ 도메인 밖의 다른 도메인 요청이 무슨 말일까? ]

notion image
컴퓨터에 스프링 서버를 하나 띄우면 127.0.0.1:8080 으로 ip주소를 요청한다. 그럼, 내가 요청한 것에 대한 자원을 응답하면 주소를 볼때 항상 이렇게 나온다.
notion image

[ 브라우저는 도메인 별로 관리가 됨 ]

브라우저에서 127.0.0.1:8080 으로 요청했잖아? 응답해서 요청이 딱 오면, 도메인이 해당하는 모든 정보를 다 관리하게 된다. 구글에서 요청하면 구글용(?) 도메인이 데이터를 관리하고, 네이버에서 요청하면 구글용이 아닌 또다른 도메인이 데이터를 다 관리한다. 즉, 도메인 별로 데이터를 따로 관리함!!
notion image
💡
localhost의 쿠키
notion image
💡
네이버의 쿠키. → localhost에 있는 저 쿠키가 존재하지 않는다!! 쿠키가 도메인 별로 따로따로 관리되는 걸 알 수 있다. 즉, 도메인 별로 모든 정보를 다 따로 관리하고 있구나!!!
 

[ 포트 번호가 다른 걸로 접근하면 어떻게 될까? ]

vsCode로 hello.html을 작성하고, 열어보자! (그럼 스프링과 vsCode의 포트가 다를 것)
notion image
💡
5500과 8080. 포트가 다르니까 둘은 다른 도메인!! 포트가 달라도 다른 도메인이다!!!!! → 도메인’ 보다는 다른 ‘출처(origin)’ 정도로 이해하면 될 듯 하다.
notion image
💡
5500/hello.html 은 도메인이 달라서 local/8080에 있던 쿠키가 없는 것 확인!!
notion image
B가 자바 스크립트 요청을 서버에 하면 같은 컴퓨터에 있다고 허용해주는게 아니라, 같은 도메인이어야!! 허용해줌. 네이버 도메인(N)에서 요청하면 거부함.
 

TIP!

💡
아이피만 달라도 origin이 다름. 포트만 달라도 origin이 다름 origin이 같다 = 아이피와 포트 둘 다 같아야 함 CORS는 크로스 오리진에서 자바 스크립트 요청을 허용하는 것임 스프링 서버에 CORS필터를 달고, 특정 아이피는 허용해주는 설정을 할거임
💡
AJAX - 자바 스크립트 요청
Share article

codingb