title: Dealing with a reverse proxy in an Angular app that uses socket.io
body: <p>I have an Angular application that communicates with a Node backend running at localhost:3000 and I'd like to configure a reverse proxy so the requests to the backend are '/api/user/login' instead of '<a href="http://localhost:3000/user/login" rel="nofollow noreferrer">http://localhost:3000/user/login</a>'. I've googled a bit and it's really easy to do using builtin Angular CLI proxy capabilities. My problem is that the application also uses socket.io and I couldn't manage to find a way to make it work after setting up the proxy. I've created a <code>proxy.conf.json</code> file with the following content:</p>
  
  <pre><code>{
    "/api": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    },
    "/socket.io": {
      "target": "http://localhost:3000",
      "secure": false,
      "changeOrigin": true
    }
  }
  </code></pre>
  
  <p>The requests to the backend work perfectly, but I've got an error regarding socket.io connection:</p>
  
  <blockquote>
    <p>WebSocket connection to
    'ws://localhost:4200/socket.io/?EIO=3&amp;transport=websocket&amp;sid=h592dAWowJvCLxO5AAAC'
    failed: WebSocket opening handshake timed out</p>
  </blockquote>
  
  <p>What do I need to change to make it work?</p>
  
  <p>Thanks in advance!</p>