CORS 에러가 개발 서버에서만 발생합니다

Question

React(localhost:3000)에서 Express API(localhost:4000)를 호출하면 CORS 에러가 납니다. Access to fetch at 'http://localhost:4000/api/users' from origin 'http://localhost:3000' has been blocked by CORS policy 프로덕션에서는 같은 도메인이라 문제없는데 개발할 때만 이런 에러가 나니까 매번 불편합니다. 프록시 설정을 해야 한다고 하는데 어떻게 하는 건가요?

김영삼 · Accepted Answer

두 가지 방법이 있습니다.

1) Express에 cors 미들웨어 추가 (서버 쪽):

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' }));

2) React dev server 프록시 설정 (클라이언트 쪽):
package.json에 "proxy": "http://localhost:4000" 추가하거나, vite.config.js에서:

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:4000'
    }
  }
})

프록시 방식이 프로덕션과 동일한 경로를 쓸 수 있어서 더 깔끔합니다. 개발 환경에서만 프록시가 동작하고 프로덕션에서는 Nginx가 처리하면 됩니다.

프론트신입 · Answer

Vite 프록시 설정했더니 바로 해결됐습니다! 프로덕션 경로도 같아져서 코드도 깔끔해졌어요. 감사합니다!

댓글 2