0

I am using pusher-js in react. My frontend is served at app.xxx.com and my backend is served at api.xxx.com. We have a private notification websocket channel to push notiifcations through app.xxx.com. What i'm trying to achieve is using the auth endpoint on backend. But no matter what i do, pusher will always request to the base URL of frontend plus auth endpoint. In my case it will be https://app.xxx.com/broadcasting/auth but i want it to be https://api.xxx.com/broadcasting/auth. What should i do? Here's my pusher config:

pusher = new Pusher(APP_ID, {
                httpHost: process.env.REACT_APP_WS_HOST,
                authEndpoint: '/broadcasting/auth',
                auth: {
                    params: {
                        id: userData.id,
                    },
                    headers: {
                        'X-CSRF-Token': '{{ csrf_token() }}'
                    }
                },
                cluster: 'ap2',
                wsHost: process.env.REACT_APP_WS_HOST,
                wsPort: 6001,
                wssPort: 6001,
                forceTLS: true,
            })

The value of process.env.REACT_APP_WS_HOST is api.xxx.com

UPDATE:
I even tried adding an authHost key but nothing changed.

Ardalan
  • 723
  • 9
  • 26

1 Answers1

3

You should be able to use the full URL to the endpoint:

authEndpoint: 'https://api.xxx.com/broadcasting/auth'
doydoy
  • 4,021
  • 3
  • 20
  • 33
  • But how do you know the exact endpoint url? As I first set up pusher everything worked fine without even defining an `authEndpoint`, but the next day I got the same error message. – AlexioVay Sep 13 '21 at 21:28