The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' error in laravel-echo-server

[ahmadbadpey]

To make real time an laravel app I want to use socket-io.

Client is an mobile App written by ionic framework and ran at 192.168.1.7:8100.

To configure and run socket-io Server I installed [laravel-echo-server][1].

This is larvel echo server configuration file to run socket io server :

{
	"authHost": "http://api.pars-app.dev",
	"authEndpoint": "/broadcasting/auth",
	"clients": [
		{
			"appId": "1924bf1d59b3759d",
			"key": "keykeykey"
		}
	],
	"database": "redis",
	"databaseConfig": {
		"redis": {},
		"sqlite": {
			"databasePath": "/database/laravel-echo-server.sqlite"
		}
	},
	"devMode": true,
	"host": null,
	"port": "3000",
	"protocol": "http",
	"socketio": {},
	"sslCertPath": "",
	"sslKeyPath": ""
}

First I run redis server with this command :

redis-server --port 3001

Then used this command to run soketio server :

laravel-echo-server start

result is like this :

L A R A V E L  E C H O  S E R V E R

version 1.2.7

⚠ Starting server in DEV mode...

✔  Running at localhost on port 3000
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

And this is Echo laravel js :

window.echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://192.168.1.7:3000',
    auth: {
        headers: {
            Authorization: 'bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUsImlzcyI6Imh0dHA6XC9cL2FwaS5wYXJzLWFwcC5kZXZcL3YxXC9hdXRoXC9zaWduSW4iLCJpYXQiOjE0OTI2NzU3OTgsImV4cCI6MTQ5NTI2Nzc5OCwibmJmIjoxNDkyNjc1Nzk4LCJqdGkiOiI5OTE3YTA4OWY0MDI4NjMwOTU5NWZmYjZmODQ2MTk5ZSJ9.oOFRmxQoiLS8BJksPkf6CQSVOcDR7rPApS71S6nZO5c'
        }
    }
});

But When I run main App in Chrome browser got below error in console :

XMLHttpRequest cannot load http://192.168.1.7:3000/socket.io/?EIO=3&transport=polling&t=LkQ5Rnb. 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'. Origin 'http://192.168.1.7:8100' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I tried many solution to solve this problem like This Answer but problem is continued.

[barryvdh]

You should return the requesting origin as allowed origin, instead of *

[ahmadbadpey]

@barryvdh, How can I do ? please guide me more

[barryvdh]

You could try https://github.com/barryvdh/laravel-cors

[ahmadbadpey]

is not possible some tasks in socket io client side to solve this problem?
in the first step , I used laravel-echo-server to run a socket-io server for a client side application that runs independently and then run on a laravel app

[barryvdh]

Oh sorry, client side of course. Perhaps https://github.com/expressjs/you can then,?

[barryvdh]

https://github.com/expressjs/cors

[ahmadbadpey]

How can I use Node.js CORS along with your laravel-echo-server. it has his own configurations?

[dav-is]

@ahmadbadpey Hey, I've been trying to get CORS working with this. You need to set 'origins': 'domain.tld:80' in the socketio config section. Issue I'm running into is authorizing private channels seems broken...

See:

{
	"authHost": "http://api.pars-app.dev",
	"authEndpoint": "/broadcasting/auth",
	"clients": [
		{
			"appId": "1924bf1d59b3759d",
			"key": "keykeykey"
		}
	],
	"database": "redis",
	"databaseConfig": {
		"redis": {},
		"sqlite": {
			"databasePath": "/database/laravel-echo-server.sqlite"
		}
	},
	"devMode": true,
	"host": null,
	"port": "3000",
	"protocol": "http",
	"socketio": {
            "origins": "domain.tld:80"
         },
	"sslCertPath": "",
	"sslKeyPath": ""
}

[aftabnaveed]

@ahmadbadpey did you ever made it work with the solution suggested by dav-is?

[ahmadbadpey]

@aftabnaveed , No I did not try it.

[sparkison]

Getting this same error. I can see the events being read and broadcast via the log, but the front-end app is getting the CORS error and not updating.

I've tried setting the origins option within the socketio variable of the echo server config file and still get the same.

Tried it both with, and without, a client. Completely stumped. Started happening after composer update. Maybe something changed with Laravel event broadcasting?

Using:

• Laravel 5.6.33
• laravel-echo-server 1.3.9
• laravel-echo 1.4.0
• socket.io-client 2.1.1

Current error:

Failed to load https://echo.test:6001/socket.io/?EIO=3&transport=polling&t=ML3pRSC: 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'. Origin 'https://echo.test' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Example of current config

{
	"authHost": "https://echo.test",
	"authEndpoint": "/broadcasting/auth",
	"clients": [
		{
			"appId": "EchoTest",
			"key": "123sdfg1sdf1g321sdf2fg13ds2ff1g3"
		}
	],
	"database": "redis",
	"databaseConfig": {
		"redis": {},
		"sqlite": {}
	},
	"devMode": true,
	"host": null,
	"port": "6001",
	"protocol": "https",
	"socketio": {},
	"sslCertPath": "/Users/me/Sites/_SSL/echo/echo.test.crt",
	"sslKeyPath": "/Users/me/Sites/_SSL/echo/echo.test.key",
	"sslCertChainPath": "",
	"sslPassphrase": "",
	"apiOriginAllow": {
		"allowCors" : true,
		"allowOrigin" : "https://echo.test",
		"allowMethods" : "GET, POST",
		"allowHeaders" : "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
	}
}

And the Echo instantiation piece looks like the following:

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
        headers: {
            Authorization: 'Bearer 123sdfg1sdf1g321sdf2fg13ds2ff1g3'
        }
    }
});

Works with, or without, the auth object. Also tried using key as well, same thing. Completely stumped at this point?

Any help appreciated!!

[sparkison]

Finally got to the bottom of this!!

After cloning and debugging this repo, I figured out it's actually socket.io-client that is the issue. I stumbled upon this comment in the socket.io-client issues.

To fix, I simply update the Echo instantiation to include the transports key, e.g.:

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    transports: ['websocket', 'polling', 'flashsocket'] // Fix CORS error!
});

No more CORS errors! 🎉

[tlaverdure]

Hey there, this issue was opened a while ago. I'm going to close this issue, if this issue still exists, please open a new issue or open a Pull Request.