Broadcasting via Pusher failing in production

[thecyrilcril]

Laravel Version

11.21.0

PHP Version

8.3.0

Database Driver & Version

10.6.18-MariaDB-cll-lve - MariaDB Server

Description

Broadcastng works in development on Windows machine but fails in production with the following errors in the console

app-wRZfXujE.js:13 WebSocket connection to 'wss://ws-.pusher.com/app/?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: 

dashboard:1 Access to XMLHttpRequest at 'https://sockjs.pusher.com/pusher/app//56/78aop8kj/xhr_streaming?protocol=7&client=js&version=8.4.0-rc2&t=1724514514797&n=1' from origin 'https://mydomain.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.
app-wRZfXujE.js:12 
        
POST https://sockjs.pusher.com/pusher/app//56/78aop8kj/xhr_streaming?protocol=7&client=js&version=8.4.0-rc2&t=1724514514797&n=1 net::ERR_FAILED

dashboard:1 Access to XMLHttpRequest at 'https://sockjs.pusher.com/pusher/app//226/sqf2rv95/xhr?protocol=7&client=js&version=8.4.0-rc2&t=1724514518806&n=2' from origin 'https://mydomain.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.
app-wRZfXujE.js:12 
        
        
 POST https://sockjs.pusher.com/pusher/app//226/sqf2rv95/xhr?protocol=7&client=js&version=8.4.0-rc2&t=1724514518806&n=2 net::ERR_FAILED

Here is what my setup looks like

.env

BROADCAST_CONNECTION=pusher

PUSHER_APP_ID="xxxx"
PUSHER_APP_KEY="xxxxx"
PUSHER_APP_SECRET="xxxx"
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME="https"
PUSHER_APP_CLUSTER="eu"

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

echo.js

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

bootstrap/app.php

<?php

declare(strict_types=1);

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__ . '/../routes/web.php',
        channels: __DIR__ . '/../routes/channels.php',
        commands: __DIR__ . '/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {})
    ->withExceptions(function (Exceptions $exceptions): void {})->create();

app.blade.php (within a alpine component)

...
init() {
        window.Echo.private(`users.${this.userId}`)
            .listen('WalletFunded', function(event) {
                $dispatch('reload-wallets');                         
        })
}
          

Steps To Reproduce

Not sure it applies, but my settings are in the description

[noefleury]

From what I’m seeing it’s not look like a Laravel issue. Just an attempt to POST data directly from your front-end app to sockjs.pusher.com (which don’t seem to add the correct Access-Control-Allow-Origin header).
I found this link talking about it (not directly about web-socket).
But I think for the current situation, you’ll cannot do nothing else than just consume the service from your client-side, see details : https://laravel.com/docs/11.x/broadcasting#client-pusher-channels so by reaching your own back-end server.

[thecyrilcril]

From what I’m seeing it’s not look like a Laravel issue. Just an attempt to POST data directly from your front-end app to sockjs.pusher.com (which don’t seem to add the correct Access-Control-Allow-Origin header). I found this link talking about it (not directly about web-socket). But I think for the current situation, you’ll cannot do nothing else than just consume the service from your client-side, see details : https://laravel.com/docs/11.x/broadcasting#client-pusher-channels so by reaching your own back-end server.

@noefleury I have updated the issue, I ommited the listening on the frontend but it was there all along, I also add the following line enabledTransports: ['ws', 'wss'] and my cors error seems to go away but I still have this error:
app-X48mdDuV.js:13 WebSocket connection to 'wss://ws-.pusher.com/app/?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:
I guess its similar to these issues laravel/reverb#153 and laravel/reverb#78