title: Socket IO with React and Express. ReactJS Error: Could not proxy request /socket.io/?EIO=4..... from localhost:3000 to http://127.0.0.1:4000
body: <p>I am trying to establish a connection between my creat-react-app frontend with my express backend. I set up the proxy to the port in which my backend serves on (4000). When I run the app, a proxy error occurs on the frontend:</p>
  <pre><code>Proxy error: Could not proxy request /socket.io/?EIO=4&amp;transport=polling&amp;t=NRRFdVj&amp;sid=CJzhACsXDlXmP4aRAAAQ from localhost:3000 to http://127.0.0.1:4000.
  See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
  </code></pre>
  <p>Here is my code:</p>
  <p>backend/index.js</p>
  <pre><code>const app = require('express')();
  const http = require('http');
  const server = http.createServer(app);
  
  const io = require('socket.io')(server);
  
  io.on('connection', (socket) =&gt; {
    console.log('New WS connection....');
  });
  
  server.listen(4000, () =&gt; console.log('Server running on port 4000'));
  </code></pre>
  <p>frontend/App.js</p>
  <pre><code>import React from 'react';
  import socketClient from 'socket.io-client';
  
  const App = () =&gt; {
    const socket = socketClient();
    return &lt;div&gt;hello&lt;/div&gt;;
  };
  
  export default App;
  </code></pre>
  <p>frontend/package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend&quot;,
    &quot;proxy&quot;: &quot;http://127.0.0.1:4000/&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.8&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;socket.io-client&quot;: &quot;^3.0.5&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&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;
      ]
    }
  }
  </code></pre>
  <p>The proxy works fine when I fetch data from the backend, but just when using it in this case a proxy error occurs...</p>