We Keep Coding

I am trying to connection my HTML frontend to node js backend using sockets

I am trying to connect my html frontend to handle the socket.on event on my frontend. My nodejs server is running on 5858 port. And I am trying to run the socketio on same port but its not connecting. my nodejs code is below
const express = require('express');
const app = express();
const connectdb = require('./db/connect.js');
const port = process.env.PORT || 5858
const DATABASE_URL = "mongodb://localhost:27017";
const server = require('http').createServer(app);
const io = require('socket.io')(server , {
cors: {
origin: false,
withCredentials: false
}
}).listen(server);
//connection to database
connectdb(DATABASE_URL);
// apply to all requests
app.use(cors())
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// app.use(express.limit('50M'));
app.use(bodyParser.json()) //Body Parser MiddleWare
app.use(express.json())
io.on('connection', (socket) => {
console.log("new connection")
socket.on('otpnumberevent', (data) => {
console.log(data);
let invid = data.id
invoicesModel.findOneAndUpdate(
invid,
data,
{
"fields" : {"otpverified" : 1},
"new": true
}
).exec((err , doc) =>{
console.log(doc)
if (err) {
let response = {
message: "Failed",
doc: err
}
io.emit('messageSent', response)
}
else {
let response = {
message: "Success",
doc: doc
}
io.emit('getotpresponse', response)
}
});
});
});
app.get('/' , (req , res) => {
res.send("Welcome to Dma backend");
});
server.listen(port, () => {
console.log('Server listening at port %d', port);
});
and from front end I am using the html code with .php extension so I am using the Online socket CDN to connect with socket my frontend code is here.
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js" integrity="sha512-YeeA/Qxn5hYdkukScTCNNOhTrv1C2RubAGButJ1rmgQwZf/HdRaCGl+JAVkqsqaNRaYNHdheiuKKuPf9mDcqKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
var socket = io('http://localhost:5858', { transports: ['websocket', 'polling', 'flashsocket'] }); //socket connection code, my nodejs server is running on 5858 port
socket.on('getotpresponse' , (data) =>{
console.log(data);
if(data.doc.otpverified == "Yes"){
swal({
title: "Success!",
text: "Otp verification Successfull",
icon: "success",
button: "Okay!",
}).then(function() {
location.reload(true);
});
}else{
swal({
title: "Failed!",
text: "OTP verification failed!",
icon: "error",
button: "Okay!",
});
}
})
})
});
and whenever I try to connect from front end I get this error in my console screen.
I have tried everything. Added the CORS in the socket connection which can be seen in the above code. Still getting the same issue

Change cors -> origin to true
const io = require('socket.io')(server , {
cors: {
origin: true,
withCredentials: false
}
}).listen(server);
If it doesn't fix follow the following:
Check if the socket is connected to the same port as the nodejs server.
If the socket is connected to the same port as the node server, check if the CORS is enabled on the socket connection.
If the CORS is enabled, check if the headers are set correctly, such as origin, X-Requested-With, Content-Type, and Accept.
If the headers are set correctly, check if the socket is. The event is correctly configured on the front end.
If the socket. If it is correctly configured, could you please check if the invoice model.findOneAndUpdate function is correctly configured on the backend?
If the invoice model.findOneAndUpdate function is correctly configured, then check if the io. Emit function is configured on the backend.
If the io. Emit function is correctly configured, then check if the socket is. The event is correctly configured on the front end.
If the socket. If the event is correctly configured, could you please check if the swap function is configured on the front end?
Could you check the location of the swap function is correctly configured? Reload function is correctly configured on the front end.
If the location. Reload function is correctly configured, and then the issue should be resolved.

Is it possible to implement socket.io connection in express route?

I implement a payment service which depend on one of my express route as a callback route, so whenever a user want to make a payment, they will be redirected to this payment service link which entirely different my backend/frontend domain. After a successful payment, user will then be redirected to my express GET route (callback route), in this route is where I give users their asset and then redirect them to the frontend.
EXPECTATION
My expectation is, whenever a user make a purchase, I want a real time update on the frontend for others to see some details about the purchase without refreshing their browser.
WHAT I'VE TRIED
I had think socket.io would solve this, like adding a socket connection in the route to then push the data to the frontend. But after making lot of research, no solution seems to work for me.
HERE IS A SIMPLE CODE OF WHAT I'VE TRIED
=============================== server.js ========================
const express = require("express")
const app = express()
const http = require("http")
const cors = require("cors")
const session = require("express-session")
const runSocket = require("./runSocket")
const { Server } = require("socket.io")
app.use(cors())
app.use(express.json())
const server = http.createServer(app)
server.listen(3004, () => {
console.log("SERVER IS RUNNING")
})
const io = new Server(server, {
cors: {
origin: "http://localhost:3000",
methods: ["GET", "POST"],
},
})
const postRoute = require("./routes/postData")(io)
app.use("/post-data", postRoute)
==================================== postData Route ======================================
module.exports = function (io) {
router.post("/", async (req, res) => {
const data = req?.body?.data.message
const room = req?.body?.data?.room
io.on("connection", (socket) => {
console.log("Socket Running...")
socket.to(room).emit("the_message", data)
})
console.log("Under socket...")
return res.status(200).json({ data: req.body.data })
})
return router
}
This log: in postData route is not printing console.log("Socket Running...")
EXPECTATION
My expectation is, whenever a user make a purchase, I would like to make a real time update on the frontend for others to see some details about the purchase.
UPDATE: The Payment Gateway config looks somthing like this:
const { body } = await got.post("https://payment-provider-link", {
headers: { Authorization: "Bearer token for payment" },
json: {
email: "email#gmail.com",
amount: amount * 100,
initiate_type: "inline",
callback_url: `${BackendBaseUrl}/payment-callback`, // <<<============
},
})

Okay so you don't need the io.on("connection") in ur route. Remove that piece of code and simply change it to io.to(room).emit("the_message", data). Also make sure to have the other sockets joined the room ur trying to emit to otherwise they won't receive the data.

how to get cookie in react passed from express js api (MERN stack)

I have an api in express js that stores token in cookie on the client-side (react). The cookie is generated only when the user logins into the site. For example, when I test the login api with the postman, the cookie is generated as expected like this:
But when I log in with react.js then no cookie is found in the browser. Looks like the cookie was not passed to the front end as the screenshot demonstrates below:
As we got an alert message this means express api is working perfectly without any error!!
Here is my index.js file on express js that includes cookie-parser middleware as well
require("dotenv").config();
const port = process.env.PORT || 5050;
const express = require("express");
const app = express();
const cors = require("cors");
const authRouter = require("./routes/auth");
var cookieParser = require('cookie-parser')
connect_db();
app.use(express.json());
app.use(cookieParser())
app.use(cors());
app.use("/" , authRouter);
app.listen(port , () => {
console.log("Server is running!!");
})
Code for setting up the cookie from express api only controller
const User = require("../models/user");
const jwt = require("jsonwebtoken");
const bcrypt = require('bcrypt')
const login = async (req, res) => {
const { email, password } = req.body;
try {
const checkDetails = await User.findOne({ email });
if (checkDetails) {
const { password: hashedPassword, token, username } = checkDetails;
bcrypt.compare(password, hashedPassword, function (err, matched) {
if (matched) {
res.cookie("token", token, { expires: new Date(Date.now() + (5 * 60000)) , httpOnly: true }).json({ "message": "You logged in sucessfully!" });
} else {
res.status(500).json({ "message": "Wrong password" });
}
});
} else {
res.status(500).json({ "message": "Wrong email" });
}
} catch (error) {
console.log(error.message);
}
}
Here is the react.js code that I am using to fetch data from api without using a proxy in package.json file
if (errors.length === 0) {
const isLogin = await fetch("http://localhost:5000/api/login", {
method: "POST",
body: JSON.stringify({ email, password }),
headers: {
"Content-Type": "application/json"
}
});
const res = await isLogin.json();
if(res) alert(res.message);
}
I want to get to know what is the reason behind this "getting cookie in postman but not in the browser". Do I need to use any react package?
The network tab screenshot might help you.
If I see in the network tab I get the same cookie, set among the other headers

To my understanding, fetch doesn't send requests with the cookies your browser has stored for that domain, and similarly, it doesn't store any cookies it receives in the response. This seems to be the expected behaviour of fetch.
To override this, try setting the credentials option when making the request, like so:
fetch(url, {
// ...
credentials: 'include'
})
or, alternatively:
fetch(url, {
// ...
credentials: 'same-origin'
})
You can read more about the differences between the two here.

I got my error resolved with two changings in my code
In front end just added credentials: 'include'
fetch(url, {
method : "POST"
body : body,
headers : headers,
credentials: 'include'
})
And in back end just replaced app.use(cors()); to
app.use(cors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] }))
That's it got resolved, Now I have cookies stored in my browser!!! Great. Thanks to this article:
https://www.anycodings.com/2022/01/react-app-express-server-set-cookie-not.html

during development i also faced same things, let me help you that how i solve it,
Firstly you use proxy in your react package.json, below private one:-
"private": true,
"proxy":"http://127.0.0.1:5000",
mention the same port on which your node server is running
Like:-
app.listen(5000,'127.0.0.1',()=>{
console.log('Server is Running');
});
above both must be on same , now react will run on port 3000 as usual but now we will create proxy to react So, react and node ports get connected on same with the help of proxy indirectly.
Now, when you will make GET or POST request from react then don't provide full URL, only provide the path on which you wants to get hit in backend and get response,
Example:-
React side on sending request, follow like this:-
const submitHandler=()=>{
axios.post('/api/loginuser',
{mobile:inputField.mobile,password:inputField.password})
.then((res)=>{
console.log(res);
})
.catch((err)=>{
console.log(err);
})
}
Node side where it will hit:-
app.post('/api/loginuser', async(req,res)=>{
//Your Code Stuff Here
res.send()
}
on both side same link should hit, it is very important
it will 100%.
don't forget to mention
on node main main where server is listening

Problem facing in socket.io in sending 'Hello World' to console [duplicate]

I'm using node and socket.io to write a chat application. It works fine on Chrome but mozilla gives an error to enable the Cross-Origin Requests.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://waleedahmad.kd.io:3000/socket.io/?EIO=2&transport=polling&t=1401964309289-2&sid=1OyDavRDf4WErI-VAAAI. This can be fixed by moving the resource to the same domain or enabling CORS.
Here's my code to start node server.
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
path = require('path');
server.listen(3000);
app.get('/', function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
On the client side.
var socket = io.connect('//waleedahmad.kd.io:3000/');
Script tag on HTML page.
<script type="text/javascript" src="//waleedahmad.kd.io:3000/socket.io/socket.io.js"></script>
I'm also using .htaccess file in the app root directory. (waleedahmad.kd.io/node).
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Simple Server-Side Fix
❗ DO NOT USE "socketio" package... use "socket.io" instead. "socketio" is out of date. Some users seem to be using the wrong package.
❗ SECURITY WARNING: Setting origin * opens up the ability for phishing sites to imitate the look and feel of your site and then have it work just the same while grifting user info. If you set the origin, you can make their job harder, not easier. Also looking into using a CSRF token as well would be a great idea.
socket.io v3
docs: https://socket.io/docs/v3/handling-cors/
cors options: https://www.npmjs.com/package/cors
const io = require('socket.io')(server, {
cors: {
origin: '*',
}
});
socket.io < v3
const io = require('socket.io')(server, { origins: '*:*'});
or
io.set('origins', '*:*');
or
io.origins('*:*') // for latest version
* alone doesn't work which took me down rabbit holes.

I am using v2.1.0 and none of the above answers worked for me.
This did though:
import express from "express";
import http from "http";
const app = express();
const server = http.createServer(app);
const sio = require("socket.io")(server, {
handlePreflightRequest: (req, res) => {
const headers = {
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Origin": req.headers.origin, //or the specific origin you want to give access to,
"Access-Control-Allow-Credentials": true
};
res.writeHead(200, headers);
res.end();
}
});
sio.on("connection", () => {
console.log("Connected!");
});
server.listen(3000);

You can try to set origins option on the server side to allow cross-origin requests:
io.set('origins', 'http://yourdomain.com:80');
Here http://yourdomain.com:80 is the origin you want to allow requests from.
You can read more about origins format here

For anyone looking here for new Socket.io (3.x) the migration documents are fairly helpful.
In particular this snippet:
const io = require("socket.io")(httpServer, {
cors: {
origin: "https://example.com",
methods: ["GET", "POST"],
allowedHeaders: ["my-custom-header"],
credentials: true
}
});

If you are getting io.set not a function or io.origins not a function, you can try such notation:
import express from 'express';
import { Server } from 'socket.io';
const app = express();
const server = app.listen(3000);
const io = new Server(server, { cors: { origin: '*' } });

I tried above and nothing worked for me. Following code is from socket.io documentation and it worked.
io.origins((origin, callback) => {
if (origin !== 'https://foo.example.com') {
return callback('origin not allowed', false);
}
callback(null, true);
});

I just wanted to say that after trying a bunch of things, what fixed my CORS problem was simply using an older version of socket.io (version 2.2.0). My package.json file now looks like this:
{
"name": "current-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devStart": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"socket.io": "^2.2.0"
},
"devDependencies": {
"nodemon": "^1.19.0"
}
}
If you execute npm install with this, you may find that the CORS problem goes away when trying to use socket.io. At least it worked for me.

In my case, I'm using an HTTP server and socket.io
Error:
var http = require('http').Server(app);
var io = require('socket.io')(http);
Solution:
var http = require('http').Server(app);
var io = require('socket.io')(http, { cors: { origin: '*' } });

client:
const socket = io('https://sms-server.cedrick1227.repl.co/', { });
server:
const io = new socket.Server(server, { cors: { origin: '*' } });
it works like a charm for me.

After read a lot of subjetcs on StakOverflow and other forums, I found the working solution for me. This solution is for working without Express.
here are the prerequisites.
call your js script (src=) form the same server the socket will be connected to (not CDN or local call)
ensure to have the same version of socket.io on server and client side
node modules required : fs, path, socket.io and winston for logging
Install Let's encrypt certbot and generate certificate for your domain or buy a SSL certificate
jQuery declared before socket.io.js on client side
UTF-8 encoding
SERVER SIDE
// DEPENDENCIES
var fs = require('fs'),
winston = require('winston'),
path = require('path');
// LOGS
const logger = winston.createLogger({
level : 'info',
format : winston.format.json(),
transports: [
new winston.transports.Console({ level: 'debug' }),
new winston.transports.File({ filename: 'err.log', level: 'err' }),
new winston.transports.File({ filename: 'combined.log' })
]
});
// CONSTANTS
const Port = 9000,
certsPath = '/etc/letsencrypt/live/my.domain.com/';
// STARTING HTTPS SERVER
var server = require('https').createServer({
key: fs.readFileSync(certsPath + 'privkey.pem'),
cert: fs.readFileSync(certsPath + 'cert.pem'),
ca: fs.readFileSync(certsPath + 'chain.pem'),
requestCert: false,
rejectUnauthorized: false
},
(req, res) => {
var filePath = '.' + req.url;
logger.info('FILE ASKED : ' + filePath);
// Default page for visitor calling directly URL
if (filePath == './')
filePath = './index.html';
var extname = path.extname(filePath);
var contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
case '.wav':
contentType = 'audio/wav';
break;
}
var headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
'Access-Control-Max-Age': 2592000, // 30 days
'Content-Type': contentType
};
fs.readFile(filePath, function(err, content) {
if (err) {
if(err.code == 'ENOENT'){
fs.readFile('./errpages/404.html', function(err, content) {
res.writeHead(404, headers);
res.end(content, 'utf-8');
});
}
else {
fs.readFile('./errpages/500.html', function(err, content) {
res.writeHead(500, headers);
res.end(content, 'utf-8');
});
}
}
else {
res.writeHead(200, headers);
res.end(content, 'utf-8');
}
});
if (req.method === 'OPTIONS') {
res.writeHead(204, headers);
res.end();
}
}).listen(port);
//OPENING SOCKET
var io = require('socket.io')(server).on('connection', function(s) {
logger.info("SERVER > Socket opened from client");
//... your code here
});
CLIENT SIDE
<script src="https://my.domain.com:port/js/socket.io.js"></script>
<script>
$(document).ready(function() {
$.socket = io.connect('https://my.domain.com:port', {
secure: true // for SSL
});
//... your code here
});
</script>

This could be a certification issue with Firefox, not necessarily anything wrong with your CORS. Firefox CORS request giving 'Cross-Origin Request Blocked' despite headers
I was running into the same exact issue with Socketio and Nodejs throwing CORS error in Firefox. I had Certs for *.myNodeSite.com, but I was referencing the LAN IP address 192.168.1.10 for Nodejs. (WAN IP address might throw the same error as well.) Since the Cert didn't match the IP address reference, Firefox threw that error.

Alright I had some issues getting this to work using a self signed cert for testing so I am going to copy my setup that worked for me. If your not using a self signed cert you probably wont have these issues, hopefully!
To start off depending on your browser Firefox or Chrome you may have different issues and I'll explain in a minute.
First the Setup:
Client
// May need to load the client script from a Absolute Path
<script src="https://www.YOURDOMAIN.com/node/node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
var options = {
rememberUpgrade:true,
transports: ['websocket'],
secure:true,
rejectUnauthorized: false
}
var socket = io.connect('https://www.YOURDOMAIN.com:PORT', options);
// Rest of your code here
</script>
Server
var fs = require('fs');
var options = {
key: fs.readFileSync('/path/to/your/file.pem'),
cert: fs.readFileSync('/path/to/your/file.crt'),
};
var origins = 'https://www.YOURDOMAIN.com:*';
var app = require('https').createServer(options,function(req,res){
// Set CORS headers
res.setHeader('Access-Control-Allow-Origin', 'https://www.YOURDOMAIN.com:*');
res.setHeader('Access-Control-Request-Method', '*');
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
res.setHeader('Access-Control-Allow-Headers', '*');
if ( req.method === 'OPTIONS' || req.method === 'GET' ) {
res.writeHead(200);
res.end();
return;
}
});
var io = require('socket.io')(app);
app.listen(PORT);
For development the options used on the client side are ok in production you would want the option:
rejectUnauthorized: false
You would more than likely want set to "true"
Next thing is if its a self signed cert you will need to vist your server in a separate page/tab and accept the cert or import it into your browser.
For Firefox I kept getting the error
MOZILLA_PKIX_ERROR_SELF_SIGNED_CERT
The solution for me was to add the following options and accepting the cert in a different page/tab.
{
rejectUnauthorized: false
}
In Chrome I had to open another page and accept the cert but after that everything worked fine with out having to add any options.
Hope this helps.
References:
https://github.com/theturtle32/WebSocket-Node/issues/259
https://github.com/socketio/engine.io-client#methods

I am facing problem while making an chat app using socket.io and node.js & React. Also this issue is not spacefic to Firefox browser, i face same issue in Edge & Chrome also.
"Cross-Origin request is blocked and it is used by some other resources..."
Then i download cors in project directory and put it in the server file index.js as below: To download simply type command using node.js :
npm install cors
const cors = require('cors');
app.use(cors());
This will allow CORS to used by different resources in the files and allow cross origin request in the browser.

For those using socket.io >= v4.4.0
Because I wanted needed the CORS option only for local development, nothing worked here for me.
The solution that I implemented, backend-side :
const io = require("socket.io")(server, {
path: '/api/socket.io',
});
if (process.env.NODE_ENV === 'development') {
io.engine.on('initial_headers', (headers, req) => {
headers['Access-Control-Allow-Origin'] = 'http://localhost:3000';
headers['Access-Control-Allow-Credentials'] = true;
});
io.engine.on('headers', (headers, req) => {
headers['Access-Control-Allow-Origin'] = 'http://localhost:3000';
headers['Access-Control-Allow-Credentials'] = true;
});
}

I was also struggling with this issue until i saw Documentation says: "You can't set 'withCredentials' to true with origin: *, you need to use a specific origin:". So my code looks like this, hope is useful:
WEB CLIENT
const { io } = require("socket.io-client");
const socket = io("localhost:3000", {
extraHeaders: {
"my-custom-header": "abcd"
}
});
SERVER
var express = require('express');
const app = express();
const http = require('http');
const httpServer = http.createServer(app);
const io = require("socket.io")(httpServer, {
cors: {
origin: '*',
methods: ["GET", "POST"],
}
});

Take a look at this:
Complete Example
Server:
let exp = require('express');
let app = exp();
//UPDATE: this is seems to be deprecated
//let io = require('socket.io').listen(app.listen(9009));
//New Syntax:
const io = require('socket.io')(app.listen(9009));
app.all('/', function (request, response, next) {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "X-Requested-With");
next();
});
Client:
<!--LOAD THIS SCRIPT FROM SOMEWHERE-->
<script src="http://127.0.0.1:9009/socket.io/socket.io.js"></script>
<script>
var socket = io("127.0.0.1:9009/", {
"force new connection": true,
"reconnectionAttempts": "Infinity",
"timeout": 10001,
"transports": ["websocket"]
}
);
</script>
I remember this from the combination of stackoverflow answers many days ago; but I could not find the main links to mention them

Here is the solution from the official documentation:
Since Socket.IO v3, you need to explicitly enable Cross-Origin Resource Sharing (CORS).
const io = require("socket.io")(httpServer, {cors: {
origin: "https://example.com", // or "*"
methods: ["GET", "POST"]}});

The combination that works for me is:
socketio = require('socket.io')(http, {
origins: process.env.WEB_URL, // http(s)://...
cors: {
origin: process.env.WEB_URL,
credentials: true
}
}).listen(process.env.SOCKET_PORT) // 8899
app.set('socketio', socketio)

Use following on the server side:
const express = require("express");
const cors = require("cors");
const http = require("http");
const app = express();
app.use(express.json());
app.use(cors());
const server = http.createServer(app);
const socket = require("socket.io")(server, {
cors: {
origin: "*",
methods: ["GET", "POST"],
},
});
socket.on("connection", (socket) => {
console.log("socket connection : ", socket.id);
});
server.listen(3001, () => {
console.log("server has started!");
});

i simply updated the version of socket.io from 2.x.x to 4.1.2 for backend and did the same ie. updated the version of socket.io-client at frontend from 2.x.x to 4.1.2 ....And it worked

So, basically in v2, the Socket.IO server automatically added the necessary headers to allow Cross-Origin Resource Sharing (CORS) therefor there was no problem for connection between client and server. But this behavior, while convenient, was not great in terms of security, because it meant that all domains were allowed to reach your Socket.IO server.
In v3 and above versions the CORS is disabled by default. Therefor you need to explicitly enable them on your server side script.
Example of my code:
In v2 of socket.io the server script looked like :
const io = require('socket.io')(8000);
But in v3 and above versions this code becomes to :
const io = require('socket.io')(8000, {
cors: {
origin: ['http://localhost:5500'],
},
});
// Remember by setting cors you allow you client to communicate with the socket server
// In this case 8000 is my port on which my socket connection is running and 5500 is my port where my client files are hosted.
// Socket connection runs on a different port and your client files on different
// Also you need to install socket.io-client where you have installed your socket.io modules
For more clarification I'm adding my files
This is my HTML File :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://localhost:8000/socket.io/socket.io.js"" content="text/javascript"></script>
<script src="javascript/client.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Chat App</title>
</head>
<body>
</body>
</html>
Here is my javascript/client.js
const socket = io('http://localhost:8000/');
And this is server/server.js
const io = require('socket.io')(8000, {
cors: {
origin: ['http://localhost:5500'],
},
});
io.on('connection', socket =>{
console.log(socket.id);
});
// If you still can't get it more detailed information can be seen on https://socket.io/docs/v4/migrating-from-2-x-to-3-0/#CORS-handling
// Also a video from which i got this solution https://youtu.be/ZKEqqIO7n-k

I had the same problem and any solution worked for me.
The cause was I am using allowRequest to accept or reject the connection using a token I pass in a query parameter.
I have a typo in the query parameter name in the client side, so the connection was always rejected, but the browser complained about cors...
As soon as I fixed the typo, it started working as expected, and I don't need to use anything extra, the global express cors settings is enough.
So, if anything is working for you, and you are using allowRequest, check that this function is working properly, because the errors it throws shows up as cors errors in the browser. Unless you add there the cors headers manually when you want to reject the connection, I guess.

Using same version for both socket.io and socket.io-client fixed my issue.

Sometimes this issue is faced when the node server stoped.
So, check if your node server working ok.
Then you can use
io.set('origins', 'http://yourdomain.com:PORT_NUMBER');

I used version 2.4.0 of socket.io in easyRTC and used the following code in server_ssl.js which worked for me
io = require("socket.io")(webServer, {
handlePreflightRequest: (req, res) => {
res.writeHead(200, {
"Access-Control-Allow-Origin": req.headers.origin,
"Access-Control-Allow-Methods": "GET,POST,OPTIONS",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Referer, User-Agent, Host, Authorization",
"Access-Control-Allow-Credentials": true,
"Access-Control-Max-Age":86400
});
res.end();
}
});

If you get socket.io app working on Chrome, Safari and other browsers but you still encounter CORS issues in Firefox, and you are using a self-signed certificate, then the problem is that Firefox does not accept self-signed certificates by default, and you have to add an exception by going to Firefox's Preferences > Certificates > View Certificates > Add Exception.
If you don't do this, then Firefox shows the error you posted which is misleading, but deep within its Developer Tools, you will find this error: MOZILLA_PKIX_ERROR_SELF_SIGNED_CERT. This indicates that Firefox is not accepting the certificate at all because it is self-signed.

const options = {
cors: {
origin:
String(process.env.ORIGINS_STRING) === "ALL"
? true
: String(process.env.ORIGINS_STRING).split(","),
methods: ["GET", "PUT", "POST", "DELETE"],
allowedHeaders: [
"Access-Control-Allow-Headers",
"X-Requested-With",
"X-Access-Token",
"Content-Type",
"Host",
"Accept",
"Connection",
"Cache-Control",
],
credentials: true,
optionsSuccessStatus: 200,
},
};
in .env file :
ORIGINS_STRING=ALL
or
ORIGINS_STRING=http://localhost:8080,http://localhost:8081

I was working with socket.io: 4.2.x, node: 14.17.x & #hapi/hapi: 20.1.x.
After trying multiple ways as mentioned in other answers, I found that the only working solutions for these version is:
const io = require('socket.io')(server.listener, { cors: { origin: '*' } });
Please make sure you have { cors: { origin: '*' } } in the options object.

I am using SocketIO with implicit http server and I am using v4.4 of socket io, I had to do it like this in the server:
const { Server } = require("socket.io");
const io = new Server(PORT, {})
io.engine.on("headers", (headers, req) => {
headers["Access-Control-Allow-Origin"] = "http://yourdomain.com"
headers["Access-Control-Allow-Headers"] = "origin, x-requested-with, content-type"
headers["Access-Control-Allow-Methodsn"] = "PUT, GET, POST, DELETE, OPTIONS"
})

const io = require('socket.io')(server, {
cors: {
origin: ['https://example.com','http://example.com','ip-address'],
}
});
Dont use origin: '*' it is a big security mistake!
origin can be used like an array with diffrent entry types:
URI with protocols like http/https
IP Address
Environment variables like process.env.WEB_URL

Seneca-web timeout configuration

First of all I would like to say that I am new in senecajs.
I am testing this configuration.
I have configured Senecjs microservice running on port 9007, which is running and handling request correctly. When I request this service directly I receive response after cca 10s (it is request for oracle db data).
But when I request for same data but through the Hapi + Seneca-web I receive this error: "statusCode":504,"error":"Gateway Time-out"
["client","invalid_origin",{"port":9007,"pin":"mc:bankgtw","pg":"mc:bankgtw","type":"web","id":"pg:mc:bankgtw,pin:mc:bankgtw,port:9007","role":"transport","hook":"client","plugin$":{"name":"client$"},"fatal$":true,"meta$":{"mi":"wbn8u45tb7uh","tx":"o3f8eyia3f4n","id":"wbn8u45tb7uh/o3f8eyia3f4n","pattern":"hook:client,role:transport,type:web","action":"(q1yytemztu3k)","plugin_name":"transport","plugin_tag":"-","prior":{"chain":[],"entry":true,"depth":0},"start":1487199713842,"sync":true},"tx$":"o3f8eyia3f4n","host":"0.0.0.0","path":"/act","protocol":"http","timeout":5555,"max_listen_attempts":11,"attempt_delay":222,"serverOptions":{}},{"kind":"res","res":null,"error":{"isBoom":true,"isServer":true,"output":{"statusCode":504,"payload":{**"statusCode":504,"error":"Gateway Time-out**","message":"Client request timeout"},"headers":{}}},"sync":true,"time":{"client_recv":1487199799177}}]
A few seconds before microservice return data.
And this is my configuration:
const Hapi = require('hapi');
const Seneca = require('seneca');
const SenecaWeb = require('seneca-web');
const config = {
adapter: require('seneca-web-adapter-hapi'),
context: (() => {
const server = new Hapi.Server();
server.connection({
port: 3001,
routes: {
cors: true,
payload:{timeout:60000},
timeout:{server: 60000, socket:90000}
}
});
server.route({
path: '/routes',
method: 'get',
handler: (request, reply) => {
const routes = server.table()[0].table.map(route => {
return {
path: route.path,
method: route.method.toUpperCase(),
description: route.settings.description,
tags: route.settings.tags,
vhost: route.settings.vhost,
cors: route.settings.cors,
jsonp: route.settings.jsonp,
server: server.info
}
})
reply(routes)
}
});
return server;
})()
};
const seneca = Seneca({timeout: 99999})
.use(SenecaWeb, config)
.use(require('./hapi_api.js'))
.client({ port:9007, pin:'mc:bankgtw' })
.ready(() => {
const server = seneca.export('web/context')();
server.start(() => {
server.log('server started on: ' + server.info.uri);
});
});
What I am doing wrong or what timeout is causing this?

I've had the same issue, fixed it, but its VERY BAD PRACTICE.
Go to 'transport.js' at seneca-transport folder.
You will see 'timeout: 5555'
Go ahead and change that to whatever you need.
I'm not sure why this is not getting USER defaults.
To the best of my knowledge, this is referring to client timeout. make sure you still use server timeout.