[TIL] netlify로 배포시, proxy 셋팅하는 방법

참고링크
참고링크2

naver open api를 사용한다는 가정 하에 작성했습니다.

문제

api를 사용하다보면 cors 때문에 proxy를 작성해야할 때가 있습니다. netlify에 배포할 경우, api는 정상 작동하지않고, 404에러가 뜹니다.

브라우저의 네트워크 탭으로 확인해보면 요청url이 아래와 같기 때문입니다.
https://도메인.netlify.app/v1/search/book.json?query=쿼리

해결방법

step 1

• api를 사용하는 파일에서 아래와 같이 작성합니다.

const PROXY = window.location.hostname === 'localhost' ? '' : '/proxy';
const URL = `${PROXY}/v1/search/book.json`;

await = axios.get(URL, {
    // ...
})

• 로컬서버일 경우,package.json에서 설정한 proxy 로 api 연동되고
• 그외(즉, 개발서버)는 api 주소 앞에 proxy가 붙습니다.

step 2

• 최상위 경로에 netlify.toml 생성 후, 아래와 같이 작성
  - .env나 package.json 와 같은 위치
• :splat 까지 꼭 써줘야합니다.
• 참고로 from에 쓰인 proxy라는 단어는 다른 단어로 교체해도 됩니다. 다만 step1에 작성한 proxy역시 동일하게 수정해야합니다.

[[redirects]]
  from = "/proxy/*"
  to = "https://openapi.naver.com/:splat"
  status = 200
  force = true