CORS(Cross Origin Resource Sharing) 에러라고?
프런트엔드, 백엔드 따로 개발하다보면 프런트엔드 개발자들이 주로 보는 에러메시지 중 하나입니다.
웹브라우저의 특수성
우리가 사용하는 웹브라우저(IExpoler, Chrome 등등)는 굉장히 편리하게 많은 일을 처리할 수 있게 도와줍니다.
인터넷뱅킹, 쇼핑, 예약, 민원처리 등등 너무 편한게 많이 있습니다.
그런데 웹브라우저라는 하나의 Application을 통해서 이루어지므로, 이 안에서 수많은 인터넷 사기도 많아지게 됩니다.
사기꾼들이 웹개발만 알게 되면, 정말 무궁무진한 창조경제가 탄생하기 때문에 일반 인터넷 사용자들은 인터넷 사기에서 자유로울 수 없습니다.
따라서 웹브라우저를 개발하는 회사들은 이러한 웹의 취약점을 잘 파악해서 문제가 없게 만들도록 해야합니다.
SOP(Same Origin Policy)에 대하여
Cross-Site Scripting (XSS)와 같은 해킹에 대해서 들어보셨나요? 그렇다면 당신은 웹관련 종사자군요!
SOP는 웹브라우저에서 발생하는 XSS와 같은 해킹을 근본적으로 막아주는 정책입니다.
SOP의 내용은 "브라우저에서는 동일한 출처의 자원만을 사용해야 한다"입니다.
동일한 출처(Same Origin)란 http프로토콜, 서버의 주소, 포트번호 이 3가지가 동일한 곳을 이야기 합니다.
동일한 출처가 아닌곳에서도 웹브라우저가 동작하게 되면 Cross-Site Scripting (XSS)와 같은 해킹에 취약해지므로 꼭 지켜야 하는 정책이라고 할 수 있습니다.
CORS(Cross Origin Resource Sharing) 에러가 발생하는 원인
프런트엔드, 백엔드 따로 개발하다보면 무조건 보게되는 에러 메시지입니다.
이 메시지는 SOP를 어겨서 발생하는 오류입니다.
웹 개발을 하면서 프런트엔드 서버와 백엔드 서버의 주소가 다를 경우 SOP를 어기게 됩니다.
HTML, CSS, JS는 프런트엔드 서버에서 다운받고, DB의 데이터는 백엔드 서버에서 다운받으려고 하면, 브라우저는 이미 프런트엔드라는 출처에서 데이터를 받아놓고, 어째서 백엔드 서버라는 출처에도 데이터를 받으려고 하느냐며 에러를 발생시킵니다.
CORS(Cross Origin Resource Sharing)가 뭐야?
SOP를 지키면서 프런트엔드와 백엔드 개발을 분리해서 진행할 수 없으니, SOP에 예외사항을 두어 분리진행을 도와주는 정책입니다.
다시 말하면 CORS는 에러코드가 아니라, 개발할 수 있게 도와주는 정책이고 이 정책을 적용하는 메시지인 것입니다.
해결 방법1 - 가장 안전하고 확실한 방법
백엔드에서 프런트엔드의 Origin을 믿음이 가는 곳이라고 등록해주면 됩니다.
SOP그늘 아래에서 백엔드가 보장해주니, 해킹도 보완해 줄 완벽한 방법입니다.
그러나 백엔드 개발자의 수고가 좀 들어가는 방법입니다.
해결 방법2 - 개발 할때만 사용할 수 있는 방법
Vue나 React같은 최신 프런트엔드에서 프레임워크에서 제공하는 Proxy서버를 이용하는 방법입니다.
프런트엔드 프레임워크들도 CORS에 설정의 불편함에 대해서 잘 알고 있습니다.
그래서 Frontend 개발할때 한정으로 플러그인의 형태로 Proxy서버를 설정할수 있게 해줍니다.
Proxy를 사용하면 웹브라우져에서 백엔드서버로 요청하게 되면 해당 요청을 가로채서 백엔드서버로 대신 요청해주고, 백엔드서버 응답을 가로채서 프런트엔드서버에서 응답하는것처럼 만들어 줍니다.
브라우저 입장에서는 모든 응답이 프런트엔드에서 오는것이므로, 백엔드 응답도 사용이 가능합니다.
해결 방법3 - 진짜 급한거 아니면 쓰면 안되는 방법
가장편하지만 매우 위험한 방법입니다.
백엔드에서 모든 Origin을 믿음이 가는 곳이라고 등록해주면 됩니다.
설정은 편하지만, SOP를 완전히 무시하는 방법으로 해킹에 취약해지게 됩니다.
해결 방법4 - 진짜 급한거 아니면 쓰면 안되는 방법
만들기도 불편하고 매우 위험한 방법인데, jsonp 방식입니다.
script태그 안의 Javascript는 실행할 수 있다는 점을 이용한 방식인데 듣기만해도 뭔가 위험해 보입니다.
CORS 해결방식이 나오기 전에 주로 쓰던 방식이라서 요세는 쓰지 않는듯합니다.
일단 이 방식을 사용하려면, 프런트엔드 개발자와 백엔드 개발자간의 프로토콜부터 만들고 시작해야 해서 너무 까다롭습니다. 그냥 안쓰는게 정답입니다.
jsonp 설명 참조 : https://simsimjae.medium.com/cors와-jsonp에-대해서-aa3ec0456e97
'Web > Vue' 카테고리의 다른 글
| 부모 자식 Component간에 데이터 바인딩(prop, emit, defineModel) (0) | 2024.08.02 |
|---|---|
| v-slot 을 이용한 UI 커스터마이징 (0) | 2024.06.11 |
| Vue에서 Route 사용하여 페이지 이동하기 (0) | 2024.04.25 |
| Vue 컴포넌트 생명 주기 (0) | 2024.04.19 |
| Vue에서 파일 내용 출력하기 (0) | 2022.05.30 |