Express 서버 CORS 에러 해결

---

CORS(Cross-Origin Resource Sharing)

• 프론트엔드와 백엔드를 분리하여 개발할 때, 두 서버가 다른 도메인에서 실행되고 있으면 브라우저 보안 정책 때문에 요청이 차단되는 현상

---

에러 상황

에러 메시지

Access to XMLHttpRequest at 'http://localhost:5000/users/reset' from origin 'http://localhost:3000' has been blocked by CORS policy.

원인

• 브라우저가 두 도메인(http://localhost:3000과 http://localhost:5000)이 다른 것으로 간주하고 요청을 차단

• 백엔드에서 프론트엔드의 요청을 허용하도록 설정하지 않았기 때문.

---

해결 방법

CORS 미들웨어 설치

npm install cors

코드 수정

기존 소스 코드

app.listen(process.env.PORT, () => {
   console.log(`Server on port number : ${process.env.PORT}.`);
});

수정된 코드

const app = express();

// CORS 설정
app.use(
  cors({
    origin: 'http://localhost:3000', // 허용할 프론트엔드 URL
    methods: ['GET', 'POST', 'PUT', 'DELETE'], // 허용할 HTTP 메서드
    credentials: true, // 쿠키 인증 정보 사용 시 설정
  })
);