Laravel Echo私有频道鉴权404错误问题排查求助

报错信息 #

laravel-echo.js:2567     POST http://localhost:3000/broadcasting/auth 404 (Not Found)

相关代码及配置 #

前端私有频道使用代码 #

var echo_to = `chat.{{ Auth::user()->id }}`;
console.log(echo_to);

window.Echo.private(echo_to)
    .listen('ChatEvent', (e) => {
        console.log(e);
    });

后端ChatEvent事件代码 #

class ChatEvent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $chat;
    public $id;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Chat $chat, int $id)
    {
        $this->chat = $chat;
        $this->id = $id;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        Log::info("Send to private: chat.{$this->id}");
        return new PrivateChannel('chat.' . $this->id);
    }
}

后端事件发送日志（laravel.log） #

[2023-09-02 18:38:45] local.INFO: Send to private: chat.2  
[2023-09-02 18:41:12] local.INFO: Send to private: chat.2  
[2023-09-02 18:44:26] local.INFO: Send to private: chat.2  
[2023-09-02 18:54:09] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:21] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:21] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:21] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:41] local.INFO: Send to private: chat.2  
[2023-09-03 07:21:50] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:27] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:37] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:44] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:45] local.INFO: Send to private: chat.2  
[2023-09-03 07:24:50] local.INFO: Send to private: chat.2  

Echo初始化代码 #

import Echo from 'laravel-echo';

window.Pusher = require("pusher-js")

console.log("ENV: " + process.env.MIX_PUSHER_APP_KEY, process.env.MIX_PUSHER_APP_CLUSTER);

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

laravel-echo-server.json配置 #

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "f22ac84fbeaf11ea",
            "key": "24ef3a97bef7f1451fc74dfe6eba46c7"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "http://localhost:8000",
        "allowMethods": "GET",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

.env相关配置 #

BROADCAST_DRIVER=pusher

问题说明 #

事件已成功发送（后端日志已打印），但前端订阅私有频道时触发上述404错误，请求帮忙排查问题原因。

内容的提问来源于stack exchange，提问作者Danendra