How do I properly map host ports and set up CORS in Docker using socket.io?

Question

Node.js

Good afternoon.

There is such a question - if the server and client are on different ports in Docker , is it really possible to forward the socket between them? There are 2 Services in

docker-compose - Nuxt frontend and Nodejs / Express / SocketIo backend . External ports are mapped to internal. 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- composite :

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

Connecting to a socket on the client:

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

Server:

I tried different combinations of port placement, I give examples and comments with curses from the client:

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})`));

I tried this link:

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.

Apparently wildcard can not be used.

Please tell me - how to set up CORS correctly ?

Maybe the problem is with the client?

Answer 1

This solution turned out to be working:
https://medium.com/@msanathkumar/building-a-simple...