laravel websockets and pusher-js CROS problem on ubuntu server

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?! :(

Have you installed a package for CORS handling like [spatie laravel/cors](https://github.com/spatie/laravel-cors)? — IlGala, Sep 25 '19 at 12:40
Does this answer your question? [Laravel Echo with Pusher and Vue](https://stackoverflow.com/questions/60479364/laravel-echo-with-pusher-and-vue) — Jacek Dziurdzikowski, Jun 13 '20 at 19:01
And found solution in another SO question: https://stackoverflow.com/questions/60479364/laravel-echo-with-pusher-and-vue — Jacek Dziurdzikowski, Jun 13 '20 at 19:01

score 2 · Answer 1 · answered May 27 '21 at 19:04

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')
    }
  }

score 0 · Answer 2 · answered Feb 11 '21 at 07:11

0

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

answered Feb 11 '21 at 07:11

Zia

506
3
20

IMO, downgrading a package version isn't a good approach to fix an issue. – PHANTOM-X Feb 11 '23 at 13:44
If you do not upgrade your `Laravel` project there shouldn't be a problem. – Zia Feb 12 '23 at 06:30

fredrick rogath · Answer 3 · 2023-01-12T15:36:31.963

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

laravel websockets and pusher-js CROS problem on ubuntu server

3 Answers3