티스토리 뷰
안녕하세요! 이번에 프로젝트를 진행하면서, 많이 접한 CORS 에러에 대해서 얘기해보고자 합니다.
❗CORS 그게 ㅁ..뭔데..?
- CORS(Cross-Origin Resource Sharing) 란?
다른 출처의 리소스 공유에 대한 허용/비허용 정책이다. 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
- 결국 CORS 는 서로 다른 출처(Orgin) 간에 리소스를 전달하는 방식을 제어하는 체제이다.
- CORS 요청이 가능하게 하려면 서버에서 특정 헤더인 Access-Control-Allow-Orgin과 함께 응답해야한다.
CORS 정책을 위반하여 무언가를 요청 하게 되면 브라우저가 보안상의 이유로 차단을 해버립니다. 예를 들어봅시다!
클라이언트 PORT 가 3000 이고, 서버의 PORT 가 8000이라고 해봅시다.
클라이언트에서 서버로 리소스를 요청했을때, 보안상의 이유로 CORS 에러 메세지가 뜨고 데이터를 주고 받지못하게 되죠.
결론 : 해결할려면 동일한 출처에서 리소스를 요청 해야한다!
🌀CORS 그럼 어떻게 해결하는데요?
로컬 환경과 배포 환경을 나누어 설명할려고 합니다.
1. http-proxy-middleware 사용 (로컬환경)
로컬 환경에 한 해서는 http-proxy-middleware 라이브러리를 사용하여 클라이언트단에서 쉽게 처리할 수있습니다.
실제 개발을 하면서, http-proxy-middleware 라이브러리를 설치하여,
src 폴더 안에 setupProxy.js 파일을 만들어 다음과 같이 코드를 작성하면 끝!
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://127.0.0.1:8000/api/v1/',
pathRewrite: {
'^/api': '',
},
}),
);
};위와 같이 코드를 작성하면, 클라이언트의 3000포트를 8000포트로 프록싱 해주게 됩니다.
따라서, 로컬 환경에서는 CORS 문제를 일으키지 않게 되어 정상적으로 작동이 가능합니다.
2. http-proxy-middleware 사용 (배포환경)
위와 같이 { withCredentials : true } 값을 주어, 서로 다른 도메인에 요청을 보낼때, Credentials 정보를 포함하고 있는 요청을
보냅니다. 여기서 Credentials 정보가 포함되어있는 경우는 아래의 두가지를 의미합니다.
1. 쿠키를 첨부해서 보내는 요청
2. 헤더에 Authorization 항목이 있는 요청
두가지 중에 한가지라도 포함 하고 있다면, withCredentials 옵션을 true 로 설정해야합니다.
서버쪽에서, 또한 Proxy 설정과 CORS 도메인에 대한 허용을 해줘야 가능합니다.
🔎 CORS 에러를 겪으면서 느낀점
프론트엔드 개발을 하다보면 항상 만나게되는 문제라고 많이 들었습니다. 실제로 겪어보니, 프로젝트 개발하는 과정에서 삽질.. 시간을 많이 잡아 먹기도 하였고, 이번 기회를 통해 꼭 짚고 넘어 가야한다는 생각이 들었습니다. 다음번에 CORS 에러가 나타났을때는 확실히 빠른 시간안에 잡을 수 있을것 같습니다😁