Netlify로 배포 시 Proxy 에러 (naver open api)

CORS 에러

npm i http-proxy-middleware

src/ setupProxy.js
src 폴더 안에 setupProxy.js 을 두고

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

module.exports = function (app) {
   app.use(
      createProxyMiddleware('/v1/search/book.json', {
         target: 'https://openapi.naver.com',
         changeOrigin: true,
      }),
   );
   app.use(
      createProxyMiddleware('/api', {
         target: 'http://localhost:3000/',
         changeOrigin: true,
      }),
   );
};

위와 같이 설정해줬다. 사용할 api 가 여럿인 경우 위처럼 사용하면 된다.
404 에러코드는 주소 설정이 잘못된 것이고, 400인 경우 쿼리를 넘겨주면 제대로 받아온다.

참고 링크

CORS 가 뭔데 CORS 에러 어떻게 해결하는건데
리액트에서 프록시 여러 개 설정하는 방법

→ 위의 방법은 로컬 개발환경에서는 제대로 동작하나, 배포했을때 api 응답이 html 페이지를 받아오는 문제가 있었다..

Netlify 배포 시 api 호출 시 html 페이지로 응답되는 문제

아무리 코드를 고쳐봐도 문제의 원인이 어디서 나온 것인지 정확히 파악하지 못해 의심가는 부분들을 테스트 해봤다. 심지어 400, 404, 500 같은 HTTP 에러가 뜬 것도 아니여서 멘붕이 왔다. 개발자 도구의 네트워크 탭에서 api 통신 요청과 응답을 하나하나 뜯어보니 아래의 1, 2번 문제는 아니었다. 정상적으로 request 되었고 env 변수도 알맞게 들어갔다. 응답이 왜 원하는 대로 되지 않는지…

1. 네이버 api url 잘못 설정
2. env 변수 잘못 입력
3. Proxy 에러
4. axios 통신 코드 문제

3, 4에서 분명히 문제가 있을 것이라 판단했고, 맨 하단의 링크들을 참고하여 코드를 수정했다.

setupProxy.js 파일을 삭제하고 netlify.toml 파일을 새로 생성하여 proxy 설정을 따로 해줬다.

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

  [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
	force = false

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

const instance = axios.create({
      headers: {
         'Content-Type': 'application/json',
         Accept: 'application/json',
         'X-Naver-Client-Id': process.env.REACT_APP_NAVER_CLIENT_ID,
         'X-Naver-Client-Secret': process.env.REACT_APP_NAVER_CLIENT_SECRET,
      },
   });

async function fetchData(query) {
      try {
         const response = await instance.get(URL, {
            params: {
               query: query,
               display: 60,
               ...

인스턴스를 생성해준다. 여기서 공부가 부족하다고 느꼈던게, 처음에는 인스턴스를 생성하지 않고 get으로 받아오려고만 해서 제대로 api 요청이 되지 않았던 것 같다. 문제를 해결하느라 엄청난 시간을 쏟아버렸고 문제의 원인을 제대로 파악하지 못해 시간이 걸린 이유도 있었다. 네트워크 통신 공부해야겠다…😥

참고 링크

Create React App - Proxy
Netlify 공식 문서
참고 블로그 링크1
참고 블로그 링크2