title: Receiving Proxy error: Error occurred while proxying request [ECONNREFUSED] in react app
body: <p>I have a react application that is making API calls through <code>axios</code> to my backend and I am receiving the error</p>
  <p><code>[HPM] Error occurred while proxying request matt.hearthdisplay.com:3000/api/user/my to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)</code></p>
  <p>I am not even calling <code>proxy</code> in my package.json so I am not sure why it's even attempting this? For context the API GET requests are working on my coworker's machines with the same code and I have recently moved to a new location with a different wifi router so I am not sure if this is a computer-specific problem.</p>
  <p><code>matt.hearthdisplay.com:3000/api/user/my</code> is my front end react app and <code>http://localhost:8000/</code> is for my backend.</p>
  <p>What could be causing this? I am on a Macbook M1 running Mac OS Montery 12.3 below are my files that should help. I have tried everything online I have found...</p>
  <p>API Request thats producing the error</p>
  <pre><code> useEffect(() =&gt; {
      async function inner() {
        const response = await axiosClient.get(`/user/my`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        if (response.status === 200) {
          setFormState({
            firstName: response.data.user.first_name,
            lastName: response.data.user.last_name,
          });
        }
      }
  
      if (!!token) {
        inner();
      }
    }, [token]);
  </code></pre>
  <p>axiosCLient.ts</p>
  <pre><code>import axios, { AxiosResponse } from &quot;axios&quot;;
  import { apiRoot } from &quot;./variables&quot;;
  
  const axiosClient = axios.create({
    baseURL: apiRoot,
  });
  
  // Timeout in 3 seconds by default
  axiosClient.defaults.timeout = 3000;
  
  function handle2xxResponse(response: AxiosResponse&lt;any&gt;): AxiosResponse&lt;any&gt; {
    return response;
  }
  
  axiosClient.interceptors.response.use(handle2xxResponse);
  
  export default axiosClient;
  </code></pre>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;webapp&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.7.1&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.6.0&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.36&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.4&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.16&quot;,
      &quot;@fullhuman/postcss-purgecss&quot;: &quot;^4.1.3&quot;,
      &quot;@mui/icons-material&quot;: &quot;^5.2.4&quot;,
      &quot;@mui/material&quot;: &quot;^5.2.4&quot;,
      &quot;@mui/styled-engine-sc&quot;: &quot;^5.1.0&quot;,
      &quot;@sentry/react&quot;: &quot;^6.16.1&quot;,
      &quot;@sentry/tracing&quot;: &quot;^6.16.1&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
      &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-lottie&quot;: &quot;^1.2.6&quot;,
      &quot;axios&quot;: &quot;^0.24.0&quot;,
      &quot;http-proxy-middleware&quot;: &quot;^2.0.3&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-hook-form&quot;: &quot;^7.21.2&quot;,
      &quot;react-lottie&quot;: &quot;^1.2.3&quot;,
      &quot;react-native-dropdown&quot;: &quot;^0.0.6&quot;,
      &quot;react-router-dom&quot;: &quot;^6.0.2&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;,
      &quot;styled-components&quot;: &quot;^5.3.3&quot;,
      &quot;tailwindcss&quot;: &quot;^2.2.19&quot;,
      &quot;typescript&quot;: &quot;^4.1.2&quot;,
      &quot;web-vitals&quot;: &quot;^1.0.1&quot;,
      &quot;zustand&quot;: &quot;^3.6.5&quot;
    },
    &quot;scripts&quot;: {
      &quot;build:tailwind&quot;: &quot;postcss src/styles/index.tailwind.css -o src/styles/index.css&quot;,
      &quot;watch:tailwind&quot;: &quot;postcss -w src/styles/index.tailwind.css -o src/styles/index.css&quot;,
      &quot;start&quot;: &quot;run-p watch:tailwind start:react&quot;,
      &quot;start:react&quot;: &quot;react-scripts start&quot;,
      &quot;prebuild&quot;: &quot;npm run build:tailwind&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.4.0&quot;,
      &quot;npm-run-all&quot;: &quot;^4.1.5&quot;,
      &quot;postcss&quot;: &quot;^8.4.4&quot;,
      &quot;postcss-cli&quot;: &quot;^9.0.2&quot;
    }
  }
  </code></pre>
  <p>setUpProxy.js</p>
  <pre><code>const { createProxyMiddleware } = require(&quot;http-proxy-middleware&quot;);
  
  module.exports = function (app) {
    app.use(
      createProxyMiddleware(&quot;/api&quot;, {
        target: &quot;http://localhost:8000&quot;,
        changeOrigin: true,
        secure: false,
      })
    );
  };
  </code></pre>