[React] 개발 서버 CORS 이슈

개발 서버에서 API 호출 시 CORS 에러가 발생하는 것을 확인했습니다.

API 서버에서 localhost:3000 에 대한 cors 처리를 하는 것이 좋지 않다는 생각이 들어, React에서 리버스 프록시를 설정하기로 결정했습니다.

 

http-proxy-middleware 설정

프록시 설정 방법은 다양하게 있으나, 그 중 가장 유연하게 설정 가능한 방법이 http-proxy-middleware 를 활용하는 것이므로 해당 방법으로 진행했습니다.

먼저, 아래 명령어를 이용해 http-proxy-middleware를 설치합니다.

npm install http-proxy-middleware --save

그 다음 src 폴더 바로 아래에 setupProxy.js 를 추가합니다.

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = app => {
  app.use('/bike',
    createProxyMiddleware(
      {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true
      }
    )
  )
}

그리고 호출하는 부분에서 target에 대한 내용을 지워줍니다.

// AS-IS
stgApi: "http://127.0.0.1:8080/bike",

// TO-BE
stgApi: "/bike",

 

배포 설정

사실 위의 과정만 해도 로컬에서는 문제가 없습니다. 그러나 배포를 하고 나면, API 요청이 아닌 페이지 요청을 하고 있는 문제가 발생합니다!!

이러한 문제가 발생하지 않도록 env 설정을 하나 추가해줍니다.

// AS-IS
stgApi: "http://127.0.0.1:8080/bike",

// TO-BE
stgApi: process.env.REACT_APP_DB_HOST + "/bike",

env 설정 파일은 package.json 과 동일 레벨에 생성합니다.

.env.development

REACT_APP_DB_HOST=""

.env.production

REACT_APP_DB_HOST="http://127.0.0.1:8080"

이렇게 env 파일을 설정하면, npm run start 시 .env.development 가 실행되고, npm run build 시 .env.production 이 실행됩니다.

그러나 이 경우, 운영 서버에서는 cors가 발생하며, 이는 API 서버에서 운영 서버에 대한 cors 처리를 해주어야 해결할 수 있다.

 

참고

• https://junhyunny.github.io/information/react/react-proxy/
• https://han-py.tistory.com/441