Как в Docker с использованием socket.io правильно обозначить порты для хостов и настроить CORS?

Question

EVOSandru6 @EVOSandru6

Как в Docker с использованием socket.io правильно обозначить порты для хостов и настроить CORS?

Добрый день.

Есть такой вопрос - если сервер и клиент на разных портах в Docker, то реально ли пробросить сокет между ними?

Есть 2 Сервиса в docker-compose - frontend на Nuxt и backend нв Nodejs/Express/SocketIo. Внешние порты маппятся на внутренние.
d8bface3deb4 app_frontend "npm run docker-dev" 16 minutes ago Up 16 minutes 0.0.0.0:3010->3000/tcp app_frontend
cf11cf802afc app_server "node" 16 minutes ago Up 16 minutes 0.0.0.0:4006->4000/tcp app_server

Docker-compose:

version: '3.7'
services:
  frontend:
    container_name: app_frontend
    build:
      context: .
      dockerfile: Dockerfile.frontend.dev
    volumes:
      - ./app/frontend:/var/www
    working_dir: /var/www
    ports:
      - 3010:3000
    environment:
      HOST: 0.0.0.0
    restart: always
    tty: true
  server:
    container_name: app_server
    build:
      context: .
      dockerfile: Dockerfile.server.dev
    volumes:
      - ./app/server:/var/www
    working_dir: /var/www
    ports:
      - 4006:4000
    environment:
      PORT: 4000

Подключение к сокету на клиенте:

export default function({ store }) {
  Vue.use(
    new VueSocketIO({
      debug: false,
      connection: 'http://localhost:4006',
      vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
      }
    })
  )
}

Сервер:

Пробовал разные комбинации расставления портов, привожу примеры и комментарии с ругательствами клиента:

const express = require('express');
const app = express();
const server = require('http').Server(app);

Access to XMLHttpRequest at 'http://localhost:4006/socket.io/?EIO=3&transport=polling&t=N5XdK-N' from origin 'http://localhost:3010' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin.
// const allowFrontPort = 3000;
// const allowFrontPortCORS = 3000;


GET http://localhost:4006/socket.io/?EIO=3&transport=polling&t=N5Xdgm1 404 (Not Found)
// const allowFrontPort = 3010;
// const allowFrontPortCORS = 3010;


Access to XMLHttpRequest at 'http://localhost:4006/socket.io/?EIO=3&transport=polling&t=N5XdtEk' from origin 'http://localhost:3010' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin.
// const allowFrontPort = 3010;
// const allowFrontPortCORS = 3000;

GET http://localhost:4006/socket.io/?EIO=3&transport=polling&t=N5Xe1ov 404 (Not Found)
const allowFrontPort = 3000;
const allowFrontPortCORS = 3010;

const io = require('socket.io')(server, {origins: `http://localhost:${allowFrontPort}`});

const cors = require('cors');

const Users = require('./Users')();
const port = 4000;

app.use(cors({
    origin: `http://localhost:${allowFrontPortCORS}`,
    credentials: true
}));

   io.on('connection', socket => {
      ...
    });

    socket.on('createMessage', (data, cb) => {
        ...
    });

    socket.on('userLeft', (id, cb) => {
        ...
    });

    socket.on('disconnect', () => {
       ...
    })
});

app.get('/', function (req, res) {
    res.send('We are happy to see you!');
});

app.listen(port, () => console.log(`Server running... (port=${port})`));

Пробовал такую связку:

const io = require('socket.io')(server, {origins: '*:*'});
app.use(cors());

Access to XMLHttpRequest at 'localhost:4006/socket.io/?EIO=3&transport=polling&...' from origin 'localhost:3010' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Видимо wildcard нельзя употреблять.

Подскажите пожалуйста - как правильно CORS настроить?

Может в клиенте проблема?