i'm making a website for a school project where there is a live updating table with data about how many rounds player have ran. It's almost done, but i'm getting one error, i can't solve:
ccess to XMLHttpRequest at 'https://creeperhd.de:8443/socket.io/?EIO=4&transport=polling&t=O88eQ0_' from origin 'https://creeperhd.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I already have this in my server code to prevent this error:
const io = require('socket.io')(http,{cors:{origin:"*"}});
But i anyways get the same error...
Can somebody tell what i can do?
CodePudding user response:
You will need to do one of two things to either enable CORS support or bypass CORS restrictions.
Option #1: Change the client-side to skip socket.io http polling by changing the client-side connection code to add an option like this:
const socket = io("https://example.com", {
transports: ["websocket"] // use webSocket only
});
It is the initial socket.io http polling that trips up on CORs restrictions. If you skip that and go straight to a webSocket connection, then webSocket connections are not limited by CORs so you won't run into CORs access issues.
Option #2: Install the CORS package on your http server and configure it appropriately to enable CORS access for your socket.io endpoint. The CORs page is here. The socket.io doc for enabling CORS access is here.
The cors
options shown for socket.io depend upon the CORS package being installed on your web server. So, you have to use both of these together or implement your own custom CORs handling to fully enable CORs access.