react에서 cors 에러 해결하기
개인 프로젝트 완료 후 vercel을 통해 배포를 시도하였으나, API 호출 과정에서 예상치 못한 CORS(Cross-Origin Resource Sharing) 오류가 발생하였습니다. 이 오류는 웹 애플리케이션에서 자주 발생하는 보안 이슈로, 다른 도메인 간의 리소스 공유 시 표준 교차 출처 보안 정책을 준수하지 못했을 때 나타납니다.
이러한 CORS 오류는 웹 개발자들 사이에서 흔히 알려진 문제이며, 이를 해결하는 방법에 대한 몇 가지 전략이 존재합니다. 이 글에서는 CORS 오류의 개념을 자세히 설명하고, 실제로 CORS 오류를 해결하기 위한 몇 가지 방법과 관련된 주요 개념들을 살펴보겠습니다.
이 글은 2024-04-15 에 업데이트 되었습니다.
이 글은 HTML, CSS , JavaScript, TypeScript, React에 대한 기본적인 지식을 알고 있어야 합니다.
CORS 란?
CORS(Cross-Origin Resource Sharing) 오류는 브라우저의 보안 정책 중 하나인 동일 출처 정책(Same-Origin Policy) 때문입니다.
동일 출처 정책(Same-Origin Policy)은 웹 보안 모델 중 하나로, 웹 브라우저가 다른 출처(도메인, 프로토콜, 포트)에서 가져온 리소스에 대한 접근을 제한하는 보안 정책입니다. 이 정책은 웹 애플리케이션의 보안을 강화하기 위해 도입되었습니다.
동일 출처 정책은 다음과 같은 원칙을 따릅니다:
출처가 동일한 경우에만 리소스에 접근이 허용됩니다. 출처란 도메인, 프로토콜, 포트를 모두 포함하는 것을 의미합니다. 예를 들어,
http://example.com과http://example.com:8080은 다른 출처로 간주됩니다.다른 출처의 리소스에 대한 읽기 및 쓰기 접근이 차단됩니다. 이는
JavaScript를 통한DOM접근,XMLHttpRequest와Fetch API를 통한 네트워크 요청,iframe을 통한 콘텐츠 로드 등에 모두 적용됩니다.
이 정책은 기본적으로 웹 브라우저가 다른 출처의 리소스에 접근하는 것을 차단하여 보안을 유지하는 역할을 합니다. 이는 웹 애플리케이션의 보안을 강화하지만, 동시에 다른 출처의 리소스에 접근해야 하는 상황에서는 문제가 될 수 있습니다.
예를 들어, vercel을 통해 호스팅되는 클라이언트 애플리케이션이 있고, 이 애플리케이션이 다른 도메인에 위치한 API 서버에 데이터를 요청하고자 할 때 CORS 오류가 발생할 수 있습니다.
개발 단계에서 해결하기
개발하면서 CORS를 해결하려면 http-proxy-middleware를 사용하면 간단하게 해결하실 수 있습니다.
1
npm install --save-dev http-proxy-middleware
그리고 프로젝트의 루트 경로에 setupProxy.js 파일을 만듭니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "https//:내가 사용할 api 주소",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
})
);
};
이렇게 설정된 프록시 미들웨어를 사용하면 클라이언트 애플리케이션에서 /api 경로로 요청을 보낼 때, 해당 요청은 설정된 대상 서버 주소로 전달되며, CORS 정책을 우회하여 원격 API 서버에 접근할 수 있습니다.
배포 단계에서 해결하기
http-proxy-middleware는 개발단계에서만 해결할 수 있는 방법이고 배포 단계에서는 실제 서버 측에서 특정 출처의 요청을 허용하도록 CORS 헤더를 설정하거나 netrify 혹은 vercel에서 따로 설정을 해줘야 합니다.
현재 저는 vercel을 이용하여 배포하고 있었기 때문에 vercel.json 파일을 이용하여 CORS 설정을 해두었습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vercel.json
{
"rewrites": [
{
"source": "/api1/:path*",
"destination": "https://내가 사용할 api주소 1"
},
{
"source": "/api2/:path*/",
"destination": "https://내가 사용할 api주소 2"
}
]
}
위의 코드에서는 배포단계에서 /api1 경로로 요청을 보냈을 시 설정된 대상 서버로 전달됩니다.
결론
CORS(Cross-Origin Resource Sharing) 에러는 개발 단계에서는 다소 귀찮은 부분으로 느껴질 수 있지만, 이는 브라우저가 예상치 못한 악의적인 공격을 사전에 방지하도록 돕습니다. 불편함을 감수하면서도 이러한 보안 조치를 적절히 구현함으로써, 사용자의 데이터 보호를 강화하고 안전한 웹 환경을 유지할 수 있습니다.