Socket.ioをReactで使ってみたいがCORSエラーが直らなくて困っています

実現したいこと

・ReactでScoket.ioを使ってローカルで動作するチャットアプリを作りたいのですが、CORSエラーが出つづけて一生サーバーと接続されません。CORSエラーの対処法を教えていただきたいです。

前提

CORSエラーの対処法として様々なものを試しました。

app.use(cors())やapp.use(関数でヘッダーなどを指定する方法)などを試してみましたが上手くいきませんでした。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'http://localhost:3100/socket.io/?EIO=4&transport=polling&t=OX2VWMF' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:3100/socket.io/?EIO=4&transport=polling&t=OX2VWMF:1     Failed to load resource: net::ERR_FAILED

該当のソースコード

javascript
1const express = require('express');
2const http = require('http');
3const socketIO = require('socket.io');
4
5const app = express();
6const server = http.createServer(app);
7const io = socketIO(server);
8
9
10app.use(function(req, res, next) {
11  res.header("Access-Control-Allow-Origin", "*");
12  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
13  next();
14});
15
16io.on('connection', (socket) => {
17  console.log('A client connected.');
18
19  // クライアントからの新しいメッセージを受け取るリスナーを設定
20  socket.on('chat message', (msg) => {
21    console.log('Received message:', msg);
22    // クライアント全体にメッセージをブロードキャスト
23    io.emit('chat message', msg);
24  });
25
26  // クライアントが切断した場合の処理
27  socket.on('disconnect', () => {
28    console.log('A client disconnected.');
29  });
30});
31
32const port = 3100; // サーバーポート番号を適宜設定してください
33
34server.listen(port, () => {
35  console.log(`Server listening on port ${port}`);
36});
37