Socket.io - Socket server doesn't console anything- has been blocked by CORS policy: The Access-CodePudding

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.

CodePudding user response：

In your app.js

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

should be

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

CodePudding user response：

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();
});