[Vuejs]-Laravel Pusher VueJS http://localhost:8000/broadcasting/auth 404 (Not Found)

by

1👍

The question was asked a long time ago, but I hope it will be useful to someone. I had the same issue using stand-alone SPA (Vue.js) and REST API (Laravel). To simplify implementation of live comments system I used laravel-echo and pusher.js. To solve the issue I specified the auth endpoint according to the "Customizing The Authorization Endpoint chapter"

https://laravel.com/docs/8.x/broadcasting#customizing-the-authorization-endpoint

I used the following approach:

authEndpoint: process.env.VUE_APP_API_ROOT + '/broadcasting/auth'

where VUE_APP_API_ROOT is "http://api.yoursite.dev

But then I got a new issue with CORS. I used JWT authentication for API endpoints and a middleware from the https://github.com/fruitcake/laravel-cors package that allows to specify ‘Access-Control-Allow-Origin’ headers to solve the CORS issue when SPA sends requests to the API from a different domain.

So to solve the CORS and authentication issue I added the broadcast routes to api.php and set the JWT auth middleware

Broadcast::routes(['middleware' => ['auth.jwt:api']]);

and set a custom Pusher authorizer using Laravel echo

window.Echo = new Echo({
    broadcaster: "pusher",
    cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER,
    encrypted: true,
    key: process.env.VUE_APP_PUSHER_APP_KEY,
    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post(process.env.VUE_APP_API_ROOT + '/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                .then(response => {
                    callback(false, response.data);
                })
                .catch(error => {
                    callback(true, error);
                });
            }
        };
    },
})

P.S. To provide axios with JWT token I used axios interceptors that allows to get token from Vuex.

axios.interceptors.request.use(config => {
  const token = store.getters['auth/accessToken'];
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  return config;
});
👤Yurii Miroshnychenko

Leave a comment