d.json()) .then((d) => resolve(d)) .catch((e) => reject(e)); }); };"> d.json()) .then((d) => resolve(d)) .catch((e) => reject(e)); }); };"> d.json()) .then((d) => resolve(d)) .catch((e) => reject(e)); }); };">

export const getPath = (x1, y1, x2, y2) => {
  //&option={탐색옵션}
  return new Promise((resolve, reject) => {
    fetch(`/map-direction/v1/driving?start=${x1},${y1}&goal=${x2},${y2}`, {
      method: "GET",
      headers: {
        "X-NCP-APIGW-API-KEY-ID": NAVER_API_KEY,
        "X-NCP-APIGW-API-KEY": NAVER_API_SECRET_KEY,
      },
    })
      .then((d) => d.json())
      .then((d) => resolve(d))
      .catch((e) => reject(e));
  });
};

},
"proxy": "<https://naveropenapi.apigw.ntruss.com>"
}

React로 영화 정보를 검색해보자 - 두번째 네이버 API 사용 / CORS 설정 하기

2개 이상 proxy

yarn add http-proxy-middleware

~~...
"proxy": {
    "/naveropenapi/": {
      "target": "<https://naveropenapi.apigw.ntruss.com>"
    },
    "/openapi/": {
      "target": "<http://openapi.naver.com>"
    }
  }
}~~

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(createProxyMiddleware("/naveropenapi/", { target: "<http://openapi.naver.com>" }));
  app.use(createProxyMiddleware("/openapi/", { target: "<http://openapi.naver.com>" }));
}

헤로쿠 Proxy서버 만들기

위의 모든 것들을 해도 안됐을떄 그냥 프록시 서버를 하나 만들어서 요청해도된다.

헤로쿠(heroku)에 github 연동해서 cors 프록시 서버 만들기(with cors-anywhere)

<https://circlin-web-react-proxy.herokuapp.com/https://openapi.naver.com/v1/search/shop.json?query=>

<aside> 💡 헤로쿠는 30분마다 깨워줘야한다.

</aside>

CORS 프록시 서버 구축 (Feat. CORS Anywhere & Heroku)

(위 링크에 있다, 아래는 핵심)

스크린샷 2021-10-27 오후 5.48.27.png