CORS Policy(Cross Origin Resource Sharing)

CORS Policy란?

CORS == “교차 출처 리소스 공유”
Policy == 를 막는행위

누가??

브라우저가

왜??

보안적인 이유로 인해서

Cross Origin

Cross Origin == Origin 이 한가지라도 다를경우를 이야기함

Origin

Origin == URL구조에서 Protocol + Host + Port를 합친것을 의미함

URL 구조

https://www.naver.com:443/api/signup?page=1

“protocol”  +    “host”    +       “port”     +    “path”    + “queryStr”
“https://” + “www.naver.com:” + “443” + “/api/signup” + “?page=1”

Same Origin Policy(동일 출처 정책)

브라우저는 해당규약을 지켜야함.
출처가 다른 리소스의 접근을 금지함.
예시로 jsp를 이용해 로컬에서 개발시 모든요청을 하나의 서버(IP, Port)에만 요청해서 해당정책에대해 이슈가 없었지만,
웹 프레임워크가 많이 나온 지금시점의경우
Vue와 Spring 프레임워크를 통해 웹애플리케이션을 개발한다고 가정했을 때,
로컬에서 개발시에는 Front(8080)에대한 서버를 구동하고, 데이터를 제공하는 Backend(8081) 에대한 서버를 나눠서 띄워개발한다.
사용자가 브라우저를통해 Front에접속하고, Front에서 특정행위를 할 때마다 Front에서 Backend로 데이터를 요청하기때문에
브라우저는 보안적인이유로 (출처가 다름) “CORS Policy” 오류를 발생시킨다.

따라서 브라우저에게 “출처가 다른 두곳에 모두요청을 할것입니다.” 라고 알려주어야한다.