http-proxy-middleware 작동하지 않는 오류

Posted Jul 11, 2023 Updated Dec 24, 2023

By hyemin 2 min read

진행하고 있는 프로젝트에서 NAVER 검색API를 사용하기 위해 setupProxy 파일에 코드를 추가하였으나 404 오류가 계속 발생하였다.
네이버 개발자 페이지도 꼼꼼히 찾아보고, 구글링도 해보았지만 해결할 수 없었다…

그러던 와중 target: "https://openapi.naver.com/"가 눈에 들어왔고, base url 뒤에 있는 슬래시때문인 것 같다는 생각이 들었고, 혹시나하는 마음에 슬래시를 삭제했더니 정상적으로 작동하는 것 같았다…

  
// setupProxy.js

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:8000",
      changeOrigin: true
    })
  );
  app.use(
    "/naverApi",
    createProxyMiddleware({
      target: "https://openapi.naver.com/",
      changeOrigin: true
    })
  );
};

@또 다른 문제 발생

error_code: "052", message: "naverApi : partner does not exists. (등록된 파트너가 없습니다.)"

라는 오류가 발생하여 데이터를 정상적으로 받아오지 못하고 있었다.
cors 문제를 해결하기 위해 구글링을 하던 와중 내가 겪고 있는 문제를 해결했던 블로그가 생각났고, 확인해보니 요청 경로를 구분하기 위해 설정해둔 단어가 문제라는 사실을 확인하였다.

내가 임의로 지정해뒀던 /naverApi를 /v1 으로 수정하였더니 데이터를 성공적으로 받아온다.

앞으로는 요청 경로를 구분하기 위해 설정하는 단어를 임의로 정하지 말고, API를 제공해주는 사이트에서 설정해놓은 단어로 지정해 최대한 오류를 만들지 않도록 해야겠다. ㅠㅠ

  
// setupProxy.js

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:8000",
      changeOrigin: true
    })
  );
  app.use(
    "/v1",
    createProxyMiddleware({
      target: "https://openapi.naver.com",
      changeOrigin: true
    })
  );
};

~데이터 받아오기 성공 이미지

참고사이트

오류해결하기

오류 대시보드앱

This post is licensed under CC BY 4.0 by the author.

@또 다른 문제 발생

Trending Tags