Proxy error: Could not proxy request /favicon/android-chrome-192x192.png from localhost:3030 to http://localhost:80/.

사정이 생겨서 노트북에서 개발 중이던 react 프로젝트 소스를 데스크탑으로 옮기게 되었다. 소스를 통째로 복사해서 옮기고 npm start 해서 실행하는 순간 에러가 발생했다. 그래서 build도 안되나 해서 npm run build 명령어를 실행하니 또 빌드는 잘된다. 그리고 특이하게 인터넷을 무선으로 잡으면 잘되고 유선랜으로 연결하면 안된다.

 

 

 

---

 

에러내용

Proxy error: Could not proxy request /favicon/android-chrome-192x192.png from localhost:3030 to http://localhost:80/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

 

 

 

---

 

해결방법

내 케이스의 경우 package.json 파일에 proxy 설정을 해놨었는데 이부분이 문제였다. 근데 문제라고 하기도 조금 애매한게 회사에서 유선랜으로 하면 잘되는데 집에서 유선랜을 연결하면 안된다. 일반 허브인 L2 장비까지는 상관없을 것 같고 L3->방화벽->통신사 단말기-> 그이후 설정에 따라서 뭐가 안되나 보다. 자세히는 알아보지 못했다.

 

현재 설정

  "proxy": "http://localhost:80",

 

 

변경

  "proxy": "http://127.0.0.1:80",

 

 

node 웹서버를 localhost:80 으로 실행해놓고 proxy 사용해서 붙는 상황이었는데 안됐다. 그래서 127.0.0.1 으로 설정을 변경하니 정상적으로 동작했다. localhost와 127.0.0.1은 모두 루프백으로 현재 pc 자신을 원격에서 붙는 것과 같이 사용할 때 사용한다. localhost->127.0.0.1 로 매핑되어 있어서 문제가 없을 것 같은데 정확히 파악은 못했다.

 

 

 

 

그리고 위의 방법 보다는 http-proxy-middleware 를 설치해서 해결된다는 글들이 많았다. 나는 이 위에 방법으로 해결되었지만 혹시 모르니 참고하면 좋겠다.

 

npm install http-proxy-middleware 설치 후 "/src/setupProxy.js" 파일 생성 후 아래 코딩하고 다시 npm start 해보면 되는 경우가 많다고 한다.

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

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