[React] CORS 오류 해결하기

위와 같은 에러는 우리가 API 호출을 하다보면 종종 접하게 되는 에러입니다.
클라이언트의 주소와 API 요청하는 주소의 오리진이 달라서 발생합니다.

React를 사용한다면 npm을 다운로드 받아서 해결할 수 있습니다.

1. http-proxy-middleware 패키지 다운로드

yarn add http-proxy-middleware

2. setupProxy.js 파일 생성

반드시 src 폴더의 바로 아래에 setupProxy.js을 생성하여야 합니다.
그래야지만 프록시 설정을 인식할 수 있습니다.

이제 setupProxy.js에 다음의 코드를 삽입합니다.

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

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: '<< 요청할 API 주소 >>',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    })
  )
}

여기서 pathRewrite는 우리가 /api로 시작하는 uri로 요청을 하면 자동으로 target에 넣는 주소로 변환하여 요청을 보내게 됩니다.

만약, target이 www.google.com이라면, 우리가 fetch('/api/search')로 요청을 보내면 실제로는 www.google.com/search로 요청을 보내게 됩니다.

3. /api을 붙여서 요청

이제 기존에 fetch나 axios 등으로 API 요청을 하듯이 요청을 보내면 됩니다.

앞서, 말했듯이 주의할 점은 기존의 uri 앞에 /api을 붙여주어야 한다는 것입니다.

저의 경우에는 다음과 같이 요청을 보냈습니다.

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  headers: {
    ...
  },
})

export const get = async (id: number) =>
  await api.get(`/contents/${id}`).then(({ data }) => data)

• 반드시 /api으로 할 필요는 없습니다. 범용적으로 사용하기에 여기서도 한 것 뿐이므로 정책이나 요구사항에 맞게 /api 부분을 변경하면 됩니다.
• 주의할 점은 setupProxy.js의 /api 부분과 baseUrl의 /api 부분은 반드시 동일해야 합니다.

4. React 재시작

우리가 http-proxy-middleware을 설치하여 setupProxy.js에서 건드는 app은 결국 서버를 의미합니다.
우리는 패키지를 통해 서버에서 필요한 부분만을 간단하게 조작하는 셈이 됩니다.

결국, 서버의 일정 부분을 변경하는 것은 같으므로 반드시 설정 후 재시작 해주어야 변경사항이 반영됩니다.

ctrl + c를 눌러서 React를 종료시켰다가 npm run start나 yarn start로 React를 다시 실행해줍니다.

여기까지 왔다면 이제 CORS 에러 대신 정상적으로 응답을 받을 수 있게 됩니다!

옵션. Netlify 배포시 Proxy 적용하기

http-proxy-middleware은 로컬 모드로 개발시에는 잘 요청/응답이 되더라도 배포할 때에는 CORS 에러를 마주하게 됩니다.

만약, netlify로 배포를 한다면 간단하게 설정을 추가해줄 수 있습니다.

root 위치에 netlify.toml 파일을 생성합니다.

[[redirects]]
  from = "/api/*"
  to = "<< API 요청할 주소>> /:splat"
  status = 200

위의 코드를 추가합니다.
앞에서 우리는 /api로 구분했기에 여기서도 /api/*이 됩니다.
반드시 API 요청할 주소 뒤에 /:splat을 넣어주어야 합니다.

:splat은 *과 같은 의미입니다.

이제, netlify로 배포 후에도 정상적으로 요청/응답이 되는 것을 볼 수 있습니다.