CORS

𝐃𝐚𝐬𝐡𝐁𝐨𝐚𝐫𝐝
/
𝐒𝐭𝐮𝐝𝐲 𝐂𝐚𝐟𝐞
/
what we maked database
/작업 상세(시은)
/
CORS
Search
Duplicate
Share
🛡️
CORS
Tags
공부
Date
Tags 2
Vue.js
URL
비고
사람
CORS (Cross-Origin Resource sharing)
CORS 는 한 도메인 또는 Origin 의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스 할 수 있게하는 보안 메커니즘이다. 이는 최신 브라우저에서 구현된 동일 출처 정책 때문에 등장하게 되었다고 한다.
동일출처 정책이란 무엇인가? 프로토콜, 호스트명, 포트가 같은 리소스에만 접근하도록 제한하는 것이다. 왜 굳이 불편하게 막아놓은걸까?
예를들어, 내가 OO 은행의 서버개발자로 일하고 있다고 생각해보자. 만약 내가 생각없이 CORS 전부 허용했다고 가정하면 어떤 일이 생길까? 세상 나쁜 마음을 가진 누군가가 인출에 관한 api 정보를 낚아서 돈을 인출해갈 수도 있다. 그래서 기본적으로 막아놓은 것!
CORS 관련 문제
웹개발을 하면 처음으로 마주하게 되는 큰 고비일 것이다. (오늘 겪었다)
vue.js 의 포트 번호는 3000, 스프링부트의 포트번호는 8080 이기 때문에 출처가 다른 포트끼리 데이터를 주고받으려고 해서 발생한 문제였다.
이를 해결하기 위한 방법은 클라이언트단, 서버단 둘 다 존재한다. 하지만 서버단 에서 처리하는게 더 맞다는 생각이 들어 corsFilter 를 사용하였다.
CorsFilter
웹 서버의 모든 리소스 요청을 가로채서 Cross domain request 인지 체크하여 실제 요청 페이지에 전달하기 전에 적절한 정책과 헤더들을 적용한다.
쉽게 말하면 이 필터를 거쳐야 리소스 공유가 가능하다는 것이다.
아래는 오늘 내가 설정한 CorsFilter 이다.
다른건 생략하고, Access-Control-Allow-Origin 부분을 보자. 이는 도메인 간 요청을 할 수 있는 권한이 부여된 도메인을 지정한다. 이렇게 적용하면 vue.js 와 스프링부트간 리소스를 공유할 수 있다!