laravel websockets and pusher-js CROS problem on ubuntu server - laravel

Question

I used laravel websockets with echo and pusher js. this is my code:
bootstrap.js:
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Pusher.Runtime.createXHR = function () {
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
return xhr;
};
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: false,
wsHost: window.location.hostname,
wsPort: 6001,
wssPort: 6001,
});
broadcasting.php:
'connections' => [
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => false,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'https',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
],
],
'redis' => [
'driver' => 'redis',
'connection' => 'default',
],
'log' => [
'driver' => 'log',
],
'null' => [
'driver' => 'null',
],
],
websockets.php
'ssl' => [
/*
* Path to local certificate file on filesystem. It must be a PEM encoded file which
* contains your certificate and private key. It can optionally contain the
* certificate chain of issuers. The private key also may be contained
* in a separate file specified by local_pk.
*/
'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),
/*
* Path to local private key file on filesystem in case of separate files for
* certificate (local_cert) and private key.
*/
'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),
/*
* Passphrase for your local_cert file.
*/
'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),
],
everything works correctly running on localhost. But when i try to run it on the server, i get this error messages on echo listener page console: (ubuntu server + ssl)
WebSocket connection to 'wss://example.com/app/ZLZVrjyIVjiXlUCF?protocol=7&client=js&version=5.0.0&flash=false' failed: Error during WebSocket handshake: Unexpected response code: 404
OPTIONS https://sockjs-mt1.pusher.com/pusher/app/ZLZVrjyIVjiXlUCF/963/qo637plk/xhr_streaming?protocol=7&client=js&version=5.0.0&t=1569413857094&n=1 404 (Not Found)
Access to XMLHttpRequest at 'https://sockjs-mt1.pusher.com/pusher/app/ZLZVrjyIVjiXlUCF/963/qo637plk/xhr_streaming?protocol=7&client=js&version=5.0.0&t=1569413857094&n=1' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
and repeats every 3 secs! do u have any idea for solving this?! :(

Answer 1

in my case, I added to config/cors.php the following
'paths' => ['api/v1/*', 'stats/*', 'broadcasting/auth'],
and identified the authEndpoint since pusher is running on another server
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: JSON.parse(process.env.MIX_PUSHER_APP_FORCE_TLS),
wsHost: process.env.MIX_PUSHER_WS_HOST,
wsPort: 6001,
enabledTransports: ['ws', 'wss'],
authEndpoint: 'http://127.0.0.1:8000/broadcasting/auth',
auth: {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('MY-AUTH-TOKEN')
}
}

Answer 2

I solved this problem by changing pusher-js version from 6.0.0 to 5.1.1. in (Laravel vuejs project)

Answer 3

pusher v4.0
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
wsHost: window.location.hostname,
forceTLS: false,
wsPort: 6001,
disableStats: true,
enabledTransports: [''],
});
Solved my problem