리액트

React 에서 fetch로 네이버 검색 API 사용하기 (feat.Vite 환경/프록시)

always_yoki 2023. 5. 28. 22:56

해결과제

1. Open API 클라이언트 신청

2. 발급받은 아이디와 키로 fetch 받아주기

3. Postman으로 데이터 전송 확인

- 여기까지는 무난하게 했는데,  CORS 에러 발생해서 막혔다.

 

4. CORS 해결하기 

 

CORS에러를 해결하는 방법에는 보통 두가지 정도가 있는것 같다.

1. 프록시 설정을 해준다.

2. 미들웨어를 쓴다.

 

사실 둘다 해봤는데 여러 블로그에 나온 방법은 모두 먹히질 않아서, 좀 더 알아본 다음 프록시 설정을 해줬다

 

먼저, 사용할 API를 컴포넌트에 심어주었다. CORS  를 우회하기 위해서 프록시 설정을 해줄것이기 때문에

http부터 .com까지는 지워주고 URL을 넣어줬다.

    async function getBooks() {
      var client_id = ""
      var client_secret = "";

      const response = await fetch(
        "/v1/search/book.json?query=" + keyword,
        {
          method: "GET",
          headers: {
            "Content-Type": "application.json",
            "X-Naver-Client-Id": client_id,
            "X-Naver-Client-Secret": client_secret,
          },
        }
      );
      const data = response.json();
      console.log(data);
    }

내 프로젝트는 Vite로 빌드되었기 때문에

따라서 package.json이 아니라 vite.config.js에서 프록시 설정을 해줘야 한다. (CRA는 package.json 에서 프로퍼티 넣어주면 된다)

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/v1': {
        target: 'https://openapi.naver.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
        secure: false,
        ws: true,
      },
    },
  }
})

이렇게 target에  내 로컬URL 대신 프록시(대리)로 사용할 타겟 url을 넣어주면 되는데, 눈속임으로 호출하는것.

('v1' 에 해당하는 부분은 각자! 엔드포인트로 사용할 API에 따라 알맞게 바꿔주면된다.)

풀 URL이 https://openapi.naver.com/v1/search/book.json 라면 엔드포인트는 /v1 이 되고, 이걸 기점으로

앞쪽에 있는 URL을 프록시로 설정해준다는 이야기. 

그러니 fetch에 넣어줄 URL 역시 v1 부터 잘라다가 써야하겠다.

이렇게 설정해주면 /v1 으로 들어오는 url은 target의 url로 바꿔서 전송한다~ 라는 의미가 된다.

 

 

통신 성공!