I'm trying to have a socket.io server interact with a React client (made with create-react-app), following a relatively recent tutorial found here.
Here are the sources : https://codesandbox.io/s/keen-ganguly-bu2gp?file=/socket-io-server/app.js
After node app.js (server side on port 8001) and npm start (client side on 3000), the client app is correctly updated (with ticking clock) when connecting to http://localhost:3000/
Now I'm trying to test this app on my phone / tablet but also with friends abroad (I'm in France, they are in US and China) using 'ngrok http 3000'
It does work locally with the ngrok address BUT only on Chrome. In Safari I get these errors in loop (at setInterval rate) :
Not allowed to request resource
XMLHttpRequest cannot load http://127.0.0.1:8001/socket.io/?EIO=4&transport=polling&t=NdmftOr due to access control checks.
[blocked] The page at https://blablabla.ngrok.io/ was not allowed to display insecure content from http://127.0.0.1:8001/socket.io/?EIO=4&transport=polling&t=NdmgKiw.
On iPhone / iPad but also with my friends abroad, the test shows nothing, only the "It's" bit without the updated date.
I can't figure out what is wrong with my settings, even though I remember I did manage to get this to work last year. I looked everywhere about new specifications for cors and even the "*" didn't do it this time.
(One last thing I should mention, maybe a detail but just in case : this summer I'm working in the countryside without 'landline' connection, so I have only my iPhone's personal hotspot to work with. I doubt it but could this be related...?)
[ EDIT ] ------------ after @sideshowbarker's edit of my tags, I realize this might have nothing to do with cors. I found this other topic, also solved by @sideshowbarker that makes me believe it has to do with SSL. :) I need to figure out if I can link my website's SSL certificate with Ngrok Pro plan, will update the post if it was the solution or not...
[EDIT 2]
Ok so I couldn't find an answer to solve this, only a workaround :
connect the ngrok tunnel to a subdomain of my personal website
installing an additional SSL certificate for that subdomain and running ngrok this way :
ngrok tls -region eu -hostname sub.domain.com -key '/path/my.key' -crt '/path/crt' 8000
At this point socket.io still didn't work, so I got pretty hopeless. I found the workaround after 2 days here : The idea is the following, instead of running the server (socket.io) and the React client on two different ports, running them on the same port by running a single command. This way Safari doesn't cause any issue and socket messages just go through ngrok to my smartphone and friends :)
