Socket.io - Socket server doesn't console anything- has been blocked by CORS policy: The Access-Control-Allow-Origin header contains the invalid value

Question

I'm building a forum site where two users after connecting can post a status then comment on them. For comments, i used socket.io .

However, whenever i successfully connect (login) to my forum, i notice that socket server doesn't console anything. Meanwhile i'm expecting in console this message A new user is connected ! .

I'm not sure if i did something wrong in my codes, so here they are:

I installed express, nodemon and socket.io in my socket server:

Socket server:

package.json

{ "name": "socket", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.17.3", "nodemon": "^2.0.15", "socket.io": "^4.4.1" } }

app.js

const io = require("socket.io")(4000, { cors: { origin: "http//localhost:3000", }, }); io.on('connection', (socket) => { console.log('A new user is connected !'); }) io.on('disconnect', () => { console.log('User has left !'); });

Front:

Also i installed socket.io-client in client (front), then in my web page, i added this code :

import { io } from 'socket.io-client' export default () => { //implement socket const socket = useRef() useEffect(() => { socket.current = io("ws://localhost:4000") }, []) return ( //some html code ) }

Console dev errors:
Console tab:

F12 Console shows theses errors every ~4 seconds:

 Failed to load resource: net::ERR_FAILED Access to XMLHttpRequest at 'http://localhost:4000/socket.io/? EIO=4&transport=polling&t=O09cPlb' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains the invalid value 'http//localhost:3000'.

Netword tab:

Shows the same Status each ~4 seconds in red : CORS error

My project tree:

 Project Forum ├── back ├── client └──index.jsx └── socket └──package.json └──app.js

Console Visual Studio Code:

Visual studio code's console always shows this only how many times i refresh browser or ctrl+S (save) the code:

[nodemon] starting 'node apde app.js'

I tried to delete cookies from Application in Console dev, clear cache, logout and login back, but none fixed my problem.

There is a colon missing in http//localhost:3000, making this value invalid. It's a typo in your app.js. — Heiko Theißen
– Heiko Theißen, Commented Apr 8, 2022 at 15:00
@HeikoTheißen i dont see the typo error you are talking about in app.js — Darkpsinight
– Darkpsinight, Commented Apr 8, 2022 at 15:04

Heiko Theißen · Accepted Answer · 2022-04-08 15:05:27Z

1

In your app.js

cors: { origin: "http//localhost:3000", }

should be

cors: { origin: "http://localhost:3000", }

answered Apr 8, 2022 at 15:05

Heiko Theißen

18.2k2 gold badges14 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavan Aditya M S · Accepted Answer · 2022-04-08 15:15:24Z

Install the cors plugin to your node.js backend using
npm i cors

Require it in your node main.js file and implement it as follows:

let express = require('express'); let cors = require('cors'); let app = express(); app.use(cors());

If you don't want to install a plugin add the following code to your main.js file in your node backend.

let express = require('express'); let app = express(); app.all('/*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); });

Ganesh MB · Accepted Answer · 2022-07-05 08:56:12Z

You can use * instead of localhost

const io = new Server(server, { cors: { origin: '*', methods: ["GET", "POST"] } });

Collectives™ on Stack Overflow

Socket.io - Socket server doesn't console anything- has been blocked by CORS policy: The Access-Control-Allow-Origin header contains the invalid value

I'm building a forum site where two users after connecting can post a status then comment on them. For comments, i used socket.io .

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

I'm building a forum site where two users after connecting can post a status then comment on them. For comments, i used socket.io .

3 Answers 3

Comments

Comments

Comments

Related