Блог

Я объявляю сокет в app.js (серверная часть) следующим образом

 var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const cors = require('cors');
var indexRouter = require('./routes/index');
var usersRouter = require('./usersdata/users.controller');

var app = express();
//To start the app set DEBUG=api:* amp; npm start
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(cors());


// Socket IO Require and object creation
const server = require('http').createServer(app);
const io = require('socket.io')(server, {pingTimeout: 60000});
const profileDataSocket=require('./sockets/profileDataSocket')
profileDataSocket(io);

  

profileDataSocket объявлен следующим образом:-

 const profileDataSocket = (io) => {
    io.on('connection', (socket) => {
      const con = new conService(io, socket);
      console.log('creating connection')
      socket.on(ON_PUSH_LOCATION, con.push_Location);
  
      socket.on('disconnect', ()=> {
      });
    });
  };
  
  module.exports = profileDataSocket;
  

и в react я использую сокет таким образом:-

 onSubmit() {
    console.log(this.state.formState.occupation);
    this.socket.emit('push message',{
      message:'Hello socket'
    })
    console.log('socket emmited');
  }
  

в react я объявляю клиент сокета, используя:-

  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
    this.socket = io('http://localhost:9000')
  }
  

Но я получаю ошибку таким образом:-
Доступ к XMLHttpRequest по адресу ‘http://localhost:9000/socket.io/?EIO=3amp;transport=pollingamp;t=NGVteci ‘из источника’http://localhost:3000 ‘ заблокирован политикой CORS: значение заголовка ‘Access-Control-Allow-Origin’ в ответе не должно быть шаблоном ‘*’, когда режим учетных данных запроса ‘include’. Режим учетных данных запросов, инициируемых XMLHttpRequest, контролируется атрибутом withCredentials

Примечание: —Мой узел работает на порту 9000, а react работает на порту 3000

Проблема, с которой вы столкнулись, заключается в политике CORS. Источник должен соответствовать заголовку Access-Control-Allow-Origin. Здесь для получения дополнительной информации: CORS

Также в express.js в репозитории вы можете найти несколько примеров: Настройка Cors — Express.js

Чтобы решить проблему, я бы сделал:

 const origin = 'http://localhost:9000'
app.use(cors({origin}))
  

Примечание: Я бы использовал origin переменную в качестве переменной окружения как: process.env['allowed_origin']