search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.77k stars 26.87k forks source link

CRA server disconnects my websocket connection #12380

Open Valter4o opened 2 years ago

Valter4o commented 2 years ago

I am using http-proxy-middleware to intercept my websocket request from the app, because I need to send cookies to BE, and Chrome doesn't attach cookies to external domains, so my only solution is to proxy the request and make the wesocket connection via the CRA server.

This is my config in the setupProxy.js

code4e

I am running a demo nodejs server on port 8080 and /testws is the endpoint to connect the websocket to. This is how I try to connect to the websocket, I am using the standart JS websocket

image

Note: I use wss because the project is served in https, and in ws it fails to connect to the proxy.

Below is the output in the terminal when I connect to the proxy.

image

The server just disconnects, doesn't throw error, onError callback in the proxy config doesn't log, it just disconnects immediatelly, it doesn't even connect to the server, I log a msg on every connection on the nodejs server and it doesn't log at all.

I can connect to the server if I don't use the proxy like this image but then again Chrome doesn't attach cookies to the request and I need them to authenticate with our real BE

I would be grateful for all kinds of suggestions. Also it is not an option for the BE to change, so please constrain from suggesting changes related to the BE. I just need to make the CRA app to make the connection. If it isn't possible, which I doubt, then we will consider changing the BE as well

JaneSu commented 2 years ago

I have the same problem

srieger1 commented 2 years ago

Same here. When I serve the production build output from npm run build websocket connection works fine, but using the development server the connection breaks immediately.

dirkesquire commented 2 years ago

I probably wasted days trying to upgrade to react-scripts@5.0.1. It refused to start up. It compiles fine but the development server breaks the connection with any clients immediately. Obviously this upgrade can't be released to production. At the end I discovered that deleting my setupProxy.js file solved this problem. So I think setupProxy needs to change somehow or an issue needs to be addressed. Unfortunately I need setupProxy.js to proxy requests for Firebase.

Update: Okay what worked for me was this: 1) delete setupProxy.js (to fix the development server from not being able to startup with react-scripts@5.0.1) 2) Add to package.json: "proxy": "http://localhost:5000" (to re-enable proxying)

Note that I don't think this issue is websocket specific but rather some compatibility problem with http-proxy-middleware. If you are using websockets you should replace the proxy with the websocket address from your setupProxy (i.e. "proxy": "ws://localhost:8080/testws"). I'm not sure how to configure the path that gets forwarded using this method, and that is why it's not ideal, but it is working for me when the path is /api.

YuesIt17 commented 1 year ago

@Valter4o , hello! Did you manage to solve this problem? 🙂