Laravel与React广播连接报419错误，请求排查解决

问题说明 #

React连接Laravel广播时，请求POST http://192.168.0.114/api/broadcasting/auth返回419（未知状态）错误，相关配置与代码如下：

Laravel端配置 #

config/broadcast.php

'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'),
        'encrypted' => true,
        'host' => '192.168.0.114',
        'port' => 6001,
        'scheme' => 'http'
    ],
],

routes/api.php

Broadcast::routes(['middleware' => ['api', 'auth:sanctum']]);

.env

PUSHER_APP_ID=osamah
PUSHER_APP_KEY=osamah
PUSHER_APP_SECRET=osamah
PUSHER_APP_CLUSTER=mt1

channels.php

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

React端代码 #

const echo = new Echo({
    broadcaster: 'pusher',
    key: 'osamah',
    cluster: 'mt1',
    wsHost: '192.168.0.114',
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
    authEndpoint: "http://192.168.0.114/api/broadcasting/auth",
    auth: {
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer 1542|3hVrlJ3A968IeZ23kejqTp8CJ9p4RCkcj66gRK4z'
        },
    }
});

echo.connector.pusher.connection.bind('connected', () => {
    console.log('connected');
    axios.get(`http://192.168.0.114/api/count`, {
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer 1542|3hVrlJ3A968IeZ23kejqTp8CJ9p4RCkcj66gRK4z'
        },
    })
    .then(res => {
        console.log(res);
    })
});

echo.private('App.Models.User.393').notification((e)=>console.log(e.user));

错误原因 #

419状态码在Laravel中对应CSRF令牌验证失败，即便使用api中间件和Sanctum认证，仍可能出现以下情况：

• api中间件组默认跳过CSRF，但全局中间件或自定义配置可能强制验证；
• Sanctum认证未正确生效，比如令牌无效、前端域名未加入stateful列表；
• 广播配置存在冲突，比如encrypted设置与实际协议不匹配。

解决步骤 #

1. 排除broadcasting/auth的CSRF验证 #

在VerifyCsrfToken中间件中添加排除项，确保api路由下的广播认证接口不校验CSRF：

// app/Http/Middleware/VerifyCsrfToken.php
protected $except = [
    '/api/broadcasting/auth',
];

2. 配置Sanctum状态域 #

在.env中添加前端域名到SANCTUM_STATEFUL_DOMAINS，确保Sanctum认可前端请求：

SANCTUM_STATEFUL_DOMAINS=localhost:3000,192.168.0.114:3000

（替换为你的React应用实际域名/端口）

3. 修正广播配置的加密设置 #

由于使用http协议，将config/broadcasting.php中的encrypted改为false，避免连接异常：

'options' => [
    'cluster' => env('PUSHER_APP_CLUSTER'),
    'encrypted' => false,
    'host' => '192.168.0.114',
    'port' => 6001,
    'scheme' => 'http'
],

4. 验证令牌有效性 #

用Postman或其他工具调用需要auth:sanctum的接口（比如你代码中的/api/count），确认Bearer令牌能正常通过认证。若令牌无效，重新生成有效令牌。

5. 清除Laravel缓存 #

执行以下命令确保配置生效：

php artisan config:clear
php artisan cache:clear

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