Cannot connect to laravel-websocket CORS issue

Question

I deployed my laravel application in GCP. I also set up SSL on my application https://myapp.com. It was working fine connecting to the pusher server. Then I switched to laravel-web sockets. I modified the same code in my /var/www/myapp with the following:

.env

PUSHER_APP_ID=sample_id
PUSHER_APP_KEY=sample_key
PUSHER_APP_SECRET=samples_secret

config/broadcasting.php

'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'),
                'useTLS' => false,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],

resources/js/bootstrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: 127.0.0.1,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true
});

Then I run it with

php artisan Webockets:serve

Then I go to my app https://myapp.com and got these errors. I am not able to connect to my WebSocket:

wss://myapp.com/app/sample_key?protocol=7&client=js&version=7.0.6&flash=false
Finished

And a series of

WebSocket connection to 'wss://myapp.com/app/sample_key?protocol=7&client=js&version=7.0.6&flash=false' failed: 

Access to XMLHttpRequest at 'https://sockjs-ap1.pusher.com/pusher/app/sample_key/856/8g5crt3n/xhr_streaming?protocol=7&client=js&version=7.0.6&t=1649947314189&n=1' from origin 'https://myapp.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.

POST https://sockjs-ap1.pusher.com/pusher/app/sample_key/856/8g5crt3n/xhr_streaming?protocol=7&client=js&version=7.0.6&t=1649947314189&n=1 net::ERR_FAILED

Do you have this `process.env.MIX_PUSHER_APP_CLUSTER` attribute in env file? — dekts, Apr 19 '22 at 17:49
Follow this steps: https://beyondco.de/docs/laravel-websockets/basic-usage/pusher and if SSL is on then add this `forceTLS:true` — dekts, Apr 19 '22 at 17:51
It looks like your code that runs in the websocket is making an Ajax request to sockjs-ap1.pusher.com. Do you have to do any configurations at sockjs-ap1.pusher.com to whitelist your hostname (https://myapp.com)? — Goldentoa11, Apr 23 '22 at 12:44

score 0 · Answer 1 · answered Nov 15 '22 at 16:48

First, if you're using Laravel Sail (Docker), you might check if you open your websocket port in docker-compose.yml.

services:
    laravel.test:
        #...
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
            - '6001:6001' #websocket port added here

If it doesn't work, you can also remove the cluster option for Echo (not necessary for laravel-websockets) and add a wss option with the same port.

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: false,
    disableStats: true,
});

score 0 · Answer 2 · answered Mar 07 '23 at 20:42

Install: pusher/pusher-php-server

composer require pusher/pusher-php-server "~3.0"

config/broadcasting.php:

    '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'),
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http'
        ],
    ],

app.js:

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,
    wsPort: 6001,
    forceTLS:false,
    disableStats: true,
});

.env:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=local
PUSHER_APP_KEY=local
PUSHER_APP_SECRET=local
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Cannot connect to laravel-websocket CORS issue

2 Answers2