[FIXED] why do i get a this cors error from using socket.io

Issue

I am using react and express js but when trying to get the socket io to connect to the client from the server I get a cors error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/socket.io/?EIO=4&transport=polling&t=O6YJzcv. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:3000/’)

The code from the backend looks like this:

const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const cors = require('cors')
 
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
    cors: {
        origin: 'http://localhost:3000/',
        methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
        allowedHeaders: ['Content-Type', 'Authorization'],
        credentials: true
    }
});

app.use(cors())

io.on('connection', socket => {
  console.log('connection to derver')
})

httpServer.listen(8080)

And the code from the client like this:

import { useState, useEffect } from 'react';
import axios from 'axios';

import { io } from "socket.io-client";
const socket = io("http://localhost:8080", {
  withCredentials: true,
  extraHeaders: {
    "my-custom-header": "abcd"
  }
});

function App() {

  return (
    <div className="App">
      <form >
        <label>dummy text</label>
      </form>
    </div>
  );
}

export default App;

I dont know what is causing the error and I have been trying to debug it but only got so far. Tried finding other peoples code seing if that would work but copying havent solved it. I would preciate all the help i could get.

Solution

If you change the client socket.io initialization to only use a webSocket, then you won't have CORs issues because webSocket connections are not subject to CORs. But, by default, socket.io starts a connection with several regular http requests which are subject to CORs. So, you can tell socket.io to just start immediately with a webSocket connection by adding the transports option like this:

const socket = io("http://localhost:8080", {
  withCredentials: true,
  extraHeaders: {
    "my-custom-header": "abcd"
  },
  transports: ["websocket"]
});

P.S. One cause of CORs issues in your code is your use of a custom header which is not explicitly enabled for CORs access and triggers CORs pre-flight authorization. But, if you configure it to just use the webSocket transport from the beginning, then you don't have to worry about any of that CORs stuff.

Answered By - jfriend00

Answer Checked By - Marilyn (PHPFixing Volunteer)