How to properly use laravel-echo-server for cross domain?

Question

Broadcast

Hey!
There is a backend on laravel ( api.domain.local ) and a frontend ( localhost:3000 ) on react
Laravel acts as an api.
They communicate with each other without problems, there is a need to attach broadcast from laravel,
I chose redis + socket.io, I took the ready-made laravel-echo-server package. The echo server
configuration is as follows:

{
  "authHost": "http://api.domain.local",
  "authEndpoint": "/broadcasting/auth",
  "clients": [],
  "database": "redis",
  "databaseConfig": {
    "redis": {},
    "sqlite": {
      "databasePath": "/database/laravel-echo-server.sqlite"
    }
  },
  "devMode": true,
  "host": null,
  "port": "6001",
  "protocol": "http",
  "socketio": {},
  "sslCertPath": "",
  "sslKeyPath": "",
  "sslCertChainPath": "",
  "sslPassphrase": "",
  "subscribers": {
    "http": true,
    "redis": true
  },
  "apiOriginAllow": {
    "allowCors": true,
    "allowOrigin": "http://localhost:3000",
    "allowMethods": "GET, POST",
    "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
  }
}

On the front side, I call Echo like this:

import Echo from 'laravel-echo';

window.io = require('socket.io-client');

const EchoServer = new Echo({
  broadcaster: 'socket.io',
  host: window.location.hostname + ':6001'
});

export default EchoServer;

And I get this error in the browser console:

Access to XMLHttpRequest at 'http://localhost:6001/socket.io/?EIO=3&transport=polling&t=MUVFI1G' from origin 'http://localhost:3000' 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.

I tried many combinations of laravel-echo-server.json, nothing helps, please help!

Answer 1

Problem solved

new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    transports: ['websocket', 'polling', 'flashsocket'],
    auth: {
      headers: {
        Authorization: `Bearer ${token}`
      }
    }
  });

But right now Client can not be authenticated, got HTTP status 419 but I think this will be resolved)