Create-react-app: Error Creating Websocket Proxy

[subodhpareek18]

I have the following setup running:

# Backend Server: localhost:8000
# CRA Webpack Dev Server: localhost:3000
# CRA Proxy Server: localhost:3001

I have a websocket client that works fine if I connect it to backend directly. But of course it would give CORS issues, so I want to proxy it via the proxy server. The same server will also serve the static files of the production ready build.

---

This is what my CRA Proxy Server looks like:

const express = require('express');
const path = require('path');
const cors = require('cors');
const proxy = require('http-proxy-middleware');

const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

const wsProxy = proxy('http://localhost:8000', { ws: true, changeOrigin: true });
app.use(cors());
app.use(wsProxy);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(3001);
server.on('upgrade', wsProxy.upgrade);

---

I use the following commands while in the dev mode, to concurrently run the webpack dev server and the proxy server.

 "scripts": {
    "client": "cross-env NODE_PATH=src react-scripts start",
    "server": "nodemon",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
     ...
  }

---

And I have tried a bunch of of proxy config, none of which seem to work (all giving different types of errors)

  "proxy": "http://localhost:3001"

```js
"proxy": {
"/": {
"target": "http://localhost:3001",
"ws": true
},
"/socket.io": {
"target": "ws://localhost:3001",
"ws": true
},
"/sockjs-node": {
"target": "ws://localhost:3001",
"ws": true
}
}

I tried connecting the client at `/api` thinking their might be an error at `/`, but it doesn't work there as well.
```js
  "proxy": {
    "/api": {
      "target": "http://localhost:3001",
      "ws": true
    }
  }

---

The errors I'm getting are of various different nature, with different proxy configs.

• Some have a socket time out error
• Some have a invalid frame header error
• Some have a bad request error
• In some cases even the proxy 3000 > 3001 is erroring out

I've tried really hard to find a complete example online that has such a setup, but to no avail. So all I could do was cobble up something using whatever docs I could fine.

Would really appreciate some help.

[jonaslu]

Don't know if this helps - I'm running the proxy that comes out of the box with CRA and not a custom one that you did. This (as far as I can see) will proxy all http and ws traffic to another host:

"proxy": {
 "/": {
   "target": "http://localhost:4000"
 },
 "/sockjs-node": {
   "target": "ws://localhost:4000",
   "ws": true
 },
 "/socket.io": {
   "target": "ws://localhost:4000",
   "ws": true
 }
},

: Yes, it's only been edited three times now because I didn't pay attention to what you wrote and if it actually worked...

[gaearon]

I'll close this as stale, sorry nobody was able to help you.

[aminnaggar]

@subodhpareek18 did you ever figure it out?

[YoucefChihi]

"proxy": {
    "/api": {
      "target": "http://localhost:3001",
      "ws": true
    },
    "/socket.io": {
      "target": "http://localhost:3001",
      "ws": true
    },
    "/sockjs-node": {
      "target": "wss://localhost:3001",
      "ws": true
    }
  }

So for some reason, when i used:

• __http__ for __/socket.io__
• __wss__ for __/sockjs-node__

it worked.
( I was using CRA out of the box proxy )