create-react-appで立てたサーバからexpressで立てたサーバにアクセスした時のCORSエラーが解決できない

Question

reactサーバと別サーバでwebsocket通信をしたい

reactでSPAを作っている中で（http://localhost:3000）双方向通信実装のためにwebsocketを導入しようと思い、expressでサーバを（http://localhost:8080）立てたのですがCORSエラーが解決できません。
かなり時間をかけていろいろ自分で調べましたが解決できませんでした。
どなたかわかる方助言いただきたいです。

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

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

フォルダ構成(一部)

src
├── App.jsx
├── index.js
├── server
│   └── server.js
〜〜〜〜

//src/server/server.js

const express = require('express');
const app = express();

app.use(function(req, res, next){
	res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Max-Age', '86400');
	next();
});


app.options('*', function (req, res) {
  res.sendStatus(200);
});

app.get('/', function(req, res){
	res.send('<h1>hello world</h1>');
});

var http = require('http').createServer(app);
var io  = require('socket.io')(http);

io.on('connection', function(socket){
	console.log('a user connected');
});


http.listen(8080, function(){
	console.log('listening on *:8080')
});

試したこと

同じようなエラーを解決している人がたくさんいたのでその人たちの記事を参考にしながら、エラー分に言われるとおりにAccess-Control-Allow-Originに他サーバーからのアクセスを許可するように書いた。
またreact側がCORS対応できていないのかと思い、プロキシを8080番に設定したがエラー分は変わらず

// ../package.json

  "proxy": "http://localhost:8080",

補足情報

react側環境
・create-react-appで環境構築
・ポート番号："http://localhost:3000"
node側環境
・"express": "^4.17.1"で環境構築
・ポート番号："http://localhost:8080"

Answer 1

res.header('Access-Control-Allow-Credentials', true);

にするなら

res.header('Access-Control-Allow-Origin', '*');

はワイルドカードをやめて明示的に指定しましょう

それ以外にもメソッドによる違い、レスポンスのステータスコードによる違いなどあるので、質問に載せられていないコードで関係ありそうなだと思えば調べましょう。

追記に対して

クライアント側の書き方がそれならサーバー側は公式を参考に(socket.io V3)以下の通り

const io = require("socket.io")(httpServer, {
  cors: {
    origin: "https://example.com",
    methods: ["GET", "POST"]
  }
});

まずはcredentials: trueのオプションは消してorigin: "*"で試してみるのがよろしい

コメントにコード書かれても読み辛くてちゃんと見る気失せるので、コードを追記する時は質問を編集してコードを書いてください

Comments

[ring-ring-ring]

回答ありがとうございます！
app.use()内を必要と思われる部分だけに絞って、また受け付けるURLも明示的にしましたが、同じエラーでうまくいきませんでした。

```
app.use(function(req, res, next){
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
next();
});
```

また、クライアント側でsocket通信をするコードを載せていなかったので追記します。
すみませんでした

```
// src/store/store.js
import {
createStore as reduxCreateStore,
combineReducers,
applyMiddleware
} from 'redux';
import { connectRouter, routerMiddleware } from 'connected-react-router';
import thunk from 'redux-thunk';

import io from 'socket.io-client'

import { matchReducer } from '../match/reducks/reducers';
import { orderReducer } from '../order/reducks/reducers';
import { serverReducer } from '../server/reducks/reducers';

let socket;

export default function createStore(history) {

if(!socket){
socket = io(':8080'); //socket.io_client呼び出し
}

return reduxCreateStore(
combineReducers({
router: connectRouter(history),
matches: matchReducer,
order: orderReducer,
server: serverReducer
}),
applyMiddleware(
routerMiddleware(history),
thunk,
)
);
}

```

また、このcreataStore(history)関数はindex.jsで呼び出され、ReactDOM.render()関数内で全てのコンポーネントをラップしています。

追記
サーバ側でsocket.ioを呼び出すときにオリジン設定をしてみたがエラー分は虚しくもそのまま
```
var io = require('socket.io')(http, {origins: ['http://localhost:3000']});
```

[ring-ring-ring]

ありがとうございました！
コネクションが確立できました。

socket.ioでのオリジン設定の仕方が良くなかったのですね。
もう少し公式を中心に読み直してみます。

コードの追記は投稿を編集する形でしたらリッチテキストが使えて良いのですね。
具体的にやりながら教えていただいてありがとうございます。
以後気をつけます！