CORS 이슈 해결하기

서버와 클라이언트가 다른 도메인에서 작동하면서 발생하는 크로스 도메인 이슈는 많은 웹 개발자들이 고민하게 만드는 문제 중 하나이다. 이번에는 프로젝트를 진행하면서 발생한 크로스 도메인 이슈 중에서 CORS(Cross-Origin Resource Sharing) 문제를 해결하는 방법에 대해서 알아보자.

1. 문제 상황 및 원인

React.js를 이용하여 프론트엔드를 개발하고, Express.js를 이용하여 백엔드를 개발하던 중, 클라이언트와 서버 간의 통신에 문제가 발생하였다. 클라이언트는 localhost:3000에서 동작하고, 서버는 localhost:8000에서 동작하고 있었ek.

클라이언트에서 서버로 API 요청을 보내면 요청은 정상적으로 전달되었지만, 응답을 받을 때 CORS(Cross-Origin Resource Sharing) 정책에 의해 브라우저에서 응답을 받지 못하는 문제가 발생하였다. 이러한 문제는 클라이언트와 서버가 다른 도메인(여기서는 포트가 다르므로)에서 작동하기 때문에 발생한다.

해당 프로젝트에서는 localhost:3000(클라이언트)와 localhost:8000(서버)이 다른 도메인으로 취급되므로, CORS 정책에 의해 클라이언트에서 서버로의 요청은 제한되었다.

2. 문제 해결

CORS 문제를 해결하기 위해, 서버에서 CORS 미들웨어를 사용하여 적절한 헤더를 설정하였습니다. Node.js와 Express.js를 사용하는 서버에서는 'cors' 라는 라이브러리를 이용하여 CORS 문제를 해결할 수 있습니다.

먼저, 'cors' 라이브러리를 설치한다.

npm install cors

그리고 서버에 CORS 미들웨어를 추가한다.

const cors = require("cors");
// ...
app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

여기서, origin은 클라이언트의 도메인을 설정하는 부분이며, credentials는 쿠키와 같은 자격 증명을 포함한 요청을 허용하도록 설정한다. 이렇게 설정하면, 클라이언트에서 API 요청을 보낼 때 CORS 이슈가 발생하지 않는다.

3. 배운점

CORS는 보안을 위해 필요한 웹 표준이지만, 때때로 개발을 어렵게 만드는 문제를 발생시킨 다는 것을 깨닫게 되었다. 하지만 적절한 라이브러리와 설정을 통해 이 문제를 간단히 해결할 수 있었다.