Home>
I want to use websocket communication with react server and another server

While making SPA with react (http: // localhost: 3000), I wanted to introduce websocket for bidirectional communication implementation, so I set up a server (http: // localhost: 8080) with express. The CORS error cannot be resolved.
I spent a lot of time researching various things myself, but I couldn't solve it.
I would like advice from anyone who understands.

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.
Folder structure (part)

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 (' hello world ');
});
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')
});
What I tried

There were many people who solved similar errors, so while referring to their articles, I wrote that Access-Control-Allow-Origin should be allowed access from other servers as the error says. It was.
Also, I thought that react side was not compatible with CORS, so I set the proxy to 8080, but the error amount did not change

// ../package.json
  "proxy": "http: // localhost: 8080",
Supplementary information

react side environment
・ Environment construction with create-react-app
-Port number: "http: // localhost: 3000"
node side environment
・ "Express": "^ 4.17.1" to build the environment
-Port number: "http: // localhost: 8080"

  • Answer # 1

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

    If you do

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

    Stop wildcardsExplicitly specifiedlet's do it

    Other than that, there are differences depending on the method, the status code of the response, etc., so if you think that the code not listed in the question seems to be related, check it.

    For postscript

    If the writing method on the client side is then, refer to the formula on the server side (socket.io V3) as follows

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


    First of allcredentials: trueTurn off the optionorigin: "*"You should try it at

    Even if the code is written in the comment, it is hard to read and it makes me feel disappointed, so when adding the code, please edit the question and write the code

Related articles