WEB | CORS (Cross-Origin Resource Sharing)
👨💻 CORS란 무엇인가?
오늘은 Cross-Origin Resource Sharing 이하 CORS에 대해 공부를 진행하도록 하겠습니다.
CORS는 다른 도메인에서 실행 중인 웹 애플리케이션에서 선택된 자원에 대한 접근 권한을 부여하는 매커니즘입니다. 다른 출처(도메인, 프로토콜, 포트)를 가진 자원을 요청 할 때, 웹 프로그램은cross-origin HTTP 요청을 실행합니다.
출처 | MDN Document
뭔가 말이 어려운것같아 다시 정리해 보겠습니다.
CORS는 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다.
이때 이 요청은 cross-origin HTTP에 의해 요청이 되어집니다.
아래의 사진은 MDN에서 발췌해 온것인데 사진에 좌측을 보면 파란색 이미지는 우측의 domain-a.com에서 불러와진 이미지임을 알 수 있습니다. 이때 domain-a.com이 좌측의 wev document를 보내준 메인 서버가 됩니다.
그리고 파란 이미지 아래를 보면 domain-b.com이라는 메인 서버가 아닌 다른 서버로부터 받아온 이미지가 있습니다.
이렇게 메인 서버가 아닌 다른 서버(크게는 도메인, 프로토콜, 포트)에 특정 자원(파일, 사진, 미디어 등)을 요청할 때 cross-origin HTTP 요청을 실행하게 됩니다.
하지만 보안상의 이유때문에 위와같은 CORS같은 상황이 발생하면 "동일 출처 정책"에 따라 브라우저가 cross-origin HTTP요청을 제한합니다.
동일 출처 정책(same-origin policy)
불러온문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이것은 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는데 도움이 됩니다.출처 | MDN Document
실제로 이러한 경고는 React개발을 하다보면 종종 발견이되어집니다.
CRA를 이용하여 React 프로젝트를 생성 후 실행하게되면 localhost:3000번으로 React 서버가 실행이 되어집니다. 그리고 같은 컴퓨터에서 서버를 개발하여 실행후 방금 만든 React 서버와 데이터를 잘 주고받나 테스트를 진행해야 하는데, 이때 이미 3000번 포트는 React 서버가 사용하고 있으니 서버는 다른 포트번호를 사용해야 합니다.
그래서 저는 보통 서버는 4000포트를 사용하고 있는데요. 이때 React서버에서 자신의 포트와 다른 4000번 포트(서버)로 특정 데이터(자원)를 요청해야 하는데, 이때 CORS가 밸생하게 됩니다.
(다른 포트로 자원을 요청하니깐요!)
이러한 경우에는 request 객체의 header에 "Access-Control-Allow-Origin" 옵션을 추가해 주시면 됩니다.
📌 CORS Middleware 사용하기
모든 request마다 CORS를 위한 "Access-Control-Allow-Origin" 옵션을 추가하기는 어렵기 때문에 Node의 cors라는 미들웨어를 사용하여 이를 처리합니다.
npm 이나 yarn을 이용해서 설치합니다.
npm install --save cors
yarn add cors그리고 express 서버 파일에서 다음과 같이 입력함으로서 쉽게 CORS를 허가해줄 수 있습니다.
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // CORS 미들웨어 추가
...
하지만 앞서서 이야기를 드렸지만 브라우저가 CORS를 막는 이유는 보안상의 이유입니다. 이렇게 모든 요청마다 CORS를 허가해준다면 보안상으로 문제가 많아지게 됩니다.
이러한 이유로 React를 이용한 개발을 진행할때는 이런 방식으로 개발을 진행하는 것 보다는
"webpack-dev-server proxy" 기능을 사용하여 서버쪽 코드를 수정하지 않고 해당 이슈를 해결하는것이 바람직합니다.