CORS(Cross-Origin Resource Sharing)란?
교차 출처 리소스 공유란 뜻이다.
https://test.com 이란 url을 살펴보면 scheme(https), domain(test.com), port(443)로 구성이 되어있는데 이것들을 출처라고 하며, 출처가 다른데 API를 통해 값을 가져오려고 할 경우 SOP(Same Origin Policy)에 의해 막히게 된다.
내 브라우저의 세션, 쿠키 등에는 인증정보가 담겨있는데, xss공격 등으로인해 이를 탈취당할 수도 있기때문에 이를 방지하고자 다른 출처로의 접근은 브라우저에서 막아주는 것이 기본 값이다.
개발자도구를 열어보면 에러메시지는 CORS라 나와있지만 사실 SOP가 막고 있는것이며 CORS는 이를 해결하는 방법이다.
CORS 동작 과정
- simple request
GET, POST 방식의 요청일 경우에 해당된다.
브라우저가 서버로 api request를 보낼 때, header에 origin(출처)값을 설정해서 보내게 된다.
서버는 response header에 Access-Control-Allow-Origin에 서버에 등록되어 있는 url 정보를 담아준다.
origin에 있는 값이 Access-Control-Allow-Origin에도 담겨있다면 data를 주고받을 수 있게된다. - preflight
PUT, DELETE 등 서버의 data 값을 변경시킬 수 있는 요청일 경우 해당된다.
simple request와 동일하지만 그 전에 브라우저가 OPTIONS 메소드를 통해서 해당 요청의 권한이 있는지 여부를 확인한다는 점이 다르다.
기타
Spring, Flask 등 대부분의 프레임워크에서는 Access-Control-Allow-Origin 값을 세팅 할 수 있는 방법을 제공하고 있다.
이는 스펙문서나 구글의 도움을 받으면 쉽게 해결할 수 있을것 같으므로 프론트에서 개발 도중의 이슈에 대해서만 기술하려고 한다.
그간 프로젝트를 해보면 보통 로컬 노드서버를 띄운 뒤 여기(localhost:8080)에 접속하여 개발을 수행하게 되는데 이 경우 출처가 다르므로 곧장 접근이 불가능하다.
Vue.js를 예시로 들자면 vue.config.js라는 파일에 아래와 같이 셋팅하면 곧장 접근하는 것이 아니라 그 가운데 노드 서버를 통해 통신하게 되므로 cors 이슈를 회피할 수 있다.
devServer: {
proxy: {
'/api': {
target: `${붙어서 작업하려는 도메인 주소}`
changeOrigin: true
},
}
}