React http-proxy-middleware 404 (not found)

안녕하세요 G1N4입니다 :-)

 

 

[발생상황]

클라이언트(3000)에서 http-proxy-middleware를 이용하여 서버(5000) 페이지의 내용을 console에 노출을 구현하는 과정에서 서버(5000)으로 넘어가지않고 클라이언트(3000)에 머물러서 404 (not found)를 만난 상황입니다.

 

 

[해결완]

setupPorxy.js 파일 내용의 한줄만 수정하여 404 지옥으로부터 벗어날 수 있었다.

//기존 404에러 유발 코드 
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

//수정 후 
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathFilter: '/api/',
    })
  );
};

원하는 결과값 노출 확인완료!

도움이 되셨길 바라며, 그럼 다음 글에서 만나요 ;-)

 

 

[참조링크]

Proxying API Requests in Development | Create React App

http-proxy-middleware - npm