[React] (connection refused): no connection could be made because the target machine actively refused it. this usually results from trying to connect to a service that is inactive on the foreign host. 해결

 

* 3시간 넘게 고민함, 왜 해결된 건지 아직도 의문

* 일단 문제는 server와 client가 연결되지 않아서 axios가 제대로 작동하지 않음

* 여러 글들을 보니 server가 문제 

-> server와 client가 포트가 다를 때 연동해주는 setProxy에서 문제가 생긴 것이라 짐작

-> 변경하고 오류 생겨서 원래 코드로 다시 고침

-> 다시 잘 작동됨

-> 대체 왜 된 걸까?

 

setProxy.js 수정 전

 

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

 

 

setProxy.js 수정 후 -> npm run dev로 서버 동작 시

[DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. 오류 발생

 

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    proxy("/api", {
      target: "https://localhost:5000",
      changeOrigin: true,
    })
  );
};

 

 

* 최종 확인 setProxy.js

 

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};