The Problem is Laravel-Websockets and Laravel-Echo combination works fine until you want to secure the connection by using SSL HTTP -> HTTPS so I installed SSL Certificate on LocalHost (xampp, also I tried that on the live server too and got the same error) and changed the forceTLS: false to forceTLS: true, but I keep getting the Provisional headers are shown error on chrome network tab I even tried Laravel CORS

bootstrap.js be like :

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,
    forceTLS: true,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    disableStats: true,
    devMode : true,

});

broadcast.php be like :

'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' => true,
                'host' => 'websocket8.test', // I read somewhere it's better to use domain name when we are working with HTTPS
                'port' => 6001,
                'scheme' => env('PUSHER_SCHEME'),
                'curl_options' => [
                    CURLOPT_SSL_VERIFYHOST => 0,
                    CURLOPT_SSL_VERIFYPEER => 0,
                ],
            ],
        ],

if you asking for .env file :

PUSHER_APP_ID={a random id}
PUSHER_APP_KEY={a random key}
PUSHER_APP_SECRET={a random secret}
PUSHER_APP_CLUSTER=mt1
PUSHER_SCHEME=http

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="E:/Software/Xampp/apache/conf/ssl.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="E:/Software/Xampp/apache/conf/ssl.key"

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

chrome network tab error is like this: