Блог

Я создаю приложение React и сервер узлов, которые должны взаимодействовать друг с другом через сокеты, используя socket.io . Когда у меня все подключено на моем локальном компьютере, у меня не возникает никаких проблем. Однако, когда я использую свой развернутый сервер, мое приложение React выдает следующую ошибку в консоли:

 Access to XMLHttpRequest at 'https://{URL TO MY HEROKU SERVER}/socket.io/?EIO=4amp;transport=pollingamp;t=NNjgExO' 
from origin '{URL FOR MY HEROKU REACT APP}' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
The 'Access-Control-Allow-Origin' header contains the invalid value '48506'.
 

Я столкнулся с аналогичной проблемой локально при сборке приложения и узнал, что мне нужно использовать cors на моем сервере, чтобы разрешить подключения. Когда я сделал это на своей локальной машине, это сработало. Однако теперь, когда я его развернул, я снова получаю ошибку такого типа. Я знаю, что для этого есть какие-то настройки cors, которые мне нужно изменить, но я действительно не знаю, что нужно изменить.
Вот код сервера:

 const server = http.createServer(app);
const io = socketio(server, {
  cors: {
    allRoutes: true,
    origin: PORT,
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true,
  },
});
 

И вот код приложения React для подключения:

 socket = io(ENDPOINT, {
      withCredentials: true,
      extraHeaders: {
        "my-custom-header": "abcd",
      },
    });
 

EDNPOINT ссылается либо на мой локальный сервер, либо на URL для развернутого сервера, в зависимости от среды, в которой я работаю. Любая помощь будет оценена!

Мне удалось выяснить настройки cors методом проб и ошибок. Для всех, кому интересно, ниже приведены настройки, которые работают для меня:

Сервер:

 const cors = require("cors");
const socketio = require("socket.io");

const app = express();
app.use(cors());

const server = http.createServer(app);

const io = socketio(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
    allowedHeaders: ["content-type"],
  },
});
 

Клиент:

 socket = io(ENDPOINT);