CORS 해결하기 - Proxy

제공된 API를 사용하여 파일 저장소를 구현해보는 팀 프로젝트를 진행하면서, CORS 이슈를 겪게 되었다.

이전에도 CORS를 겪어본 적이 있었고, 요청을 보낼 때 header에 Access-Control-Allow-Origin을 추가하는 방식으로도 간단히 문제를 해결할 수 있었다.

이 방식으로 진행을 했음에도 불구하고 CORS 문제는 해결되지 않아 크게 당황하였다...

결국 Proxy로 해결을 하였지만 왜 동작하지 않는지 이유를 몰랐고, 결국 찾게 되어 정리를 해본다.

먼저, 아래의 코드처럼 header를 담아 요청을 보냈다.

axios
    .get(`${REACT_APP_API_POINT}`, {
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
    })

이 방식이 동작하지 않았던 이유는

클라이언트 요청의 헤더가 아니라 서버의 응답 헤더에 Access-Control-Allow-Origin: '*' 가 있어야 해결되는 문제였다.

이전에 제공된 API로 프로젝트를 진행에서 헤더만 추가해도 문제가 해결되었던 경우는 서버에서 이 작업을 해준 뒤 넘겨줬기 때문에 문제가 발생하지 않았던 것으로 예상된다.

결국 아래의 Proxy 코드로 문제를 해결하였다. (Netlify 배포 기준)

package.json

{
	// ...
    "proxy": <API 주소>
}

api.js

// proxy 에 설정한 API_ENDPOINT 이후의 주소를 env로 관리하였음 
const { REACT_APP_API_POINT } = process.env;

// 개발 서버일 때는 프록시가 필요없으므로 따로 설정
const PROXY = window.location.hostname === 'localhost' ? '' : '/proxy';

export const fetchApi = async () => {
  return axios
    .get(`${PROXY}${REACT_APP_API_POINT}`)
    .then((res) => res.data);
};

netlify.toml

[[redirects]]
  from = "/proxy/*"
  to = "<proxy 주소>:splat"
  status = 200
  force = true

[context.production.environment]
  TOML_ENV_VAR = "From netlify.toml"
  REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"

:splat에 proxy 이후의 주소가 들어간다.

위와 같은 방식으로 proxy를 설정하여 문제를 해결했다.