CORS restriction issue

[afletcher187]

Hi, I have just attempted to implement the Websocket package and seem to have a problem with

pusher.js?dc8e:4027 WebSocket connection to 'wss://localhost/app/anyKey?protocol=7&client=js&version=7.0.6&flash=false' failed: createWebSocket @ pusher.js?dc8e:4027 getSocket @ pusher.js?dc8e:1759 TransportConnection.connect @ pusher.js?dc8e:1608 onInitialized @ pusher.js?dc8e:4171 Dispatcher.emit @ pusher.js?dc8e:1548 TransportConnection.changeState @ pusher.js?dc8e:1718 transport_connection_initializer @ pusher.js?dc8e:3507 TransportStrategy.connect @ pusher.js?dc8e:4200 SequentialStrategy.tryStrategy @ pusher.js?dc8e:3137 tryNextStrategy @ pusher.js?dc8e:3108 eval @ pusher.js?dc8e:3134 eval @ pusher.js?dc8e:956 eval @ pusher.js?dc8e:914 localhost/:1 Access to XMLHttpRequest at 'https://sockjs.pusher.com/pusher/app/anyKey/511/qnrokcht/xhr_streaming?protocol=7&client=js&version=7.0.6&t=1649756848846&n=7' from origin 'http://localhost:8000' 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.

I am not sure what I need to change to resolve this.

Apologies this I know may not be an issue as such and maybe an advisory that can be added to your excellent documentation

[gbrits]

I am having the same problem. I imagine it could be the pusher-js version or something like that that's still trying to communicate with sockjs.pusher.com instead of utilising the wsHost direction.

If I manage to solve it I will post the solution.

[gbrits]

The issue was rectified for me by adding the wssPort attribute to the Echo config:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'vip-pusher-key',
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001, // Added this
    disableStats: true,
});

[cariboufute]

If you're using Laravel Sail (Docker), you might also check if your 6001 port is open in docker-compose.yml.

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