Laravel 11中Reverb主域名正常子域名失效，如何启用子域名支持？

问题描述 #

在Laravel 11中使用Reverb实现实时通信，主域名（如domainname.com）功能正常，但子域名（erp.domainname.com、api.domainname.com、seller.domainname.com）访问时Reverb连接失败。已配置子域名路由和CORS，问题仍存在。

当前配置信息 #

.env 文件

APP_DOMAIN=reverb-app.test
APP_URL="http://${APP_DOMAIN}"

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=
REVERB_APP_KEY=
REVERB_APP_SECRET=
REVERB_HOST="${APP_DOMAIN}"
REVERB_ERP_HOST="$erp.{APP_DOMAIN}"
REVERB_SELLER_HOST="seller.${APP_DOMAIN}"
REVERB_PORT=6001
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_ERP_HOST="${REVERB_ERP_HOST}"
VITE_REVERB_SELLER_HOST="${REVERB_SELLER_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

resources/js/bootstrap.js

import axios from "axios";
window.axios = axios;

window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allow your team to quickly build robust real-time web applications.
 */

import "./echo";
import "./erp_echo";
import "./seller_echo";

resources/js/echo.js

import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;
console.log(import.meta.env.VITE_REVERB_HOST);
window.Echo = new Echo({
    broadcaster: "reverb",
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

resources/js/erp_echo.js

import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;
console.log(import.meta.env.VITE_REVERB_HOST);
window.ErpEcho = new Echo({
    broadcaster: "reverb",
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_ERP_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

resources/js/seller_echo.js

import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;
console.log(import.meta.env.VITE_REVERB_HOST);
window.SellerEcho = new Echo({
    broadcaster: "reverb",
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_SELLER_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

修复步骤 #

1. 修正.env变量语法错误 #

.env中REVERB_ERP_HOST的写法有误，美元符号位置错误导致子域名解析失败，修正为：

REVERB_ERP_HOST="erp.${APP_DOMAIN}"

2. 让Reverb监听所有主机 #

Reverb默认只监听配置的REVERB_HOST，修改为监听所有IP，确保所有域名/子域名的请求都能被接收：

REVERB_HOST=0.0.0.0

或者启动Reverb时指定主机：

php artisan reverb:start --host=0.0.0.0

3. 简化客户端Echo配置，动态匹配当前域名 #

无需为每个子域名单独创建Echo实例，直接根据当前页面域名动态设置wsHost，删除erp_echo.js和seller_echo.js，修改echo.js：

import Echo from "laravel-echo";
import Pusher from "pusher-js";
window.Pusher = Pusher;

// 动态获取当前页面的域名
const currentHost = window.location.hostname;
window.Echo = new Echo({
    broadcaster: "reverb",
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: currentHost,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});

同时修改bootstrap.js，只保留必要的导入：

import axios from "axios";
window.axios = axios;

window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

import "./echo";

4. 完善跨域配置 #

CORS配置（config/cors.php）

确保允许所有需要的域名跨域：

return [
    'paths' => ['api/*', 'broadcasting/auth'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [
        'http://reverb-app.test',
        'http://erp.reverb-app.test',
        'http://seller.reverb-app.test',
    ],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Reverb跨域配置（config/broadcasting.php）

在Reverb配置中添加允许的跨域域名：

'reverb' => [
    'driver' => 'reverb',
    'key' => env('REVERB_APP_KEY'),
    'secret' => env('REVERB_APP_SECRET'),
    'app_id' => env('REVERB_APP_ID'),
    'options' => [
        'host' => env('REVERB_HOST', 'localhost'),
        'port' => env('REVERB_PORT', 6001),
        'scheme' => env('REVERB_SCHEME', 'http'),
        'useTLS' => env('REVERB_SCHEME') === 'https',
    ],
    'client_options' => [
        'allowed_origins' => [
            'http://reverb-app.test',
            'http://erp.reverb-app.test',
            'http://seller.reverb-app.test',
        ],
    ],
],

5. 重启服务 #

修改配置后，必须重启Reverb和Vite服务：

# 重启Reverb
php artisan reverb:stop
php artisan reverb:start

# 重启Vite开发服务器
npm run dev

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