Laravel中Botman聊天机器人嵌入模态框无响应及protocol报错问题

问题描述 #

使用Laravel/PHP框架，需要将Botman聊天机器人嵌入模态框。通过widget.js加载组件时，机器人可正常显示并回复，但切换为chat.js实现嵌入后，机器人完全无响应，控制台抛出以下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')

尝试配置frameEndpoint: '/iFrameUrl'参数，但未解决问题。

Widget实现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your Website</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/assets/css/chat.min.css">

</head>
<body>
    <script>
        var botmanWidget = {
            title: 'ChatBot',
            introMessage: "Type 'start' to begin the quiz",
            placeholderText: 'Ask Me Something',
            mainColor: '#F28240',
            bubbleBackground: '#F28240',
            aboutText: '',
            aboutLink: 'www.bookworkflow.com',
            bubbleAvatarUrl: '',
            desktopWidth: 1000,
            desktopHeight: 800,
        };

    </script>
     <script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/widget.js'></script>
</body>
</html>

Chat实现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your Website</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/assets/css/chat.min.css">

</head>
<body>
    <script>
        var botmanWidget = {
            title: 'ChatBot',
            introMessage: "Type 'start' to begin the quiz",
            placeholderText: 'Ask Me Something',
            mainColor: '#F28240',
            bubbleBackground: '#F28240',
            aboutText: '',
            aboutLink: 'www.bookworkflow.com',
            bubbleAvatarUrl: '',
            desktopWidth: 500,
            desktopHeight: 800,
        };

    </script>
    <script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/chat.js'></script>
</body>
</html>

控制台报错日志 #

chat.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
    at chat.js:1:19413
    at chat.js:1:13244
    at new Promise (<anonymous>)
    at t.exports (chat.js:1:12134)
    at t.exports (chat.js:1:21377)
(anonymous) @ chat.js:1
(anonymous) @ chat.js:1
t.exports @ chat.js:1
t.exports @ chat.js:1
Promise.then (async)
callAPI @ chat.js:1
e.say @ chat.js:1
r.handleKeyPress @ chat.js:1
m @ chat.js:1

解决方案 #

1. 配置完整的frameEndpoint地址 #

chat.js需要明确指定Botman后端的完整API端点，不能使用相对路径——这是导致protocol读取错误的核心原因。修改配置如下：

var botmanWidget = {
    title: 'ChatBot',
    introMessage: "Type 'start' to begin the quiz",
    placeholderText: 'Ask Me Something',
    mainColor: '#F28240',
    bubbleBackground: '#F28240',
    aboutText: '',
    aboutLink: 'www.bookworkflow.com',
    bubbleAvatarUrl: '',
    desktopWidth: 500,
    desktopHeight: 800,
    frameEndpoint: 'https://your-domain.com/botman' // 替换为你的Laravel应用Botman路由完整URL
};

2. 检查并配置Laravel CORS #

如果前端页面与Botman后端不在同一域名下，需配置CORS允许跨域请求：

• 安装barryvdh/laravel-cors包，发布配置文件后，修改config/cors.php：

return [
    'paths' => ['botman/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://your-frontend-domain.com'], // 替换为前端域名
    'allowed_headers' => ['*'],
    'supports_credentials' => false,
];

• 在app/Http/Kernel.php的middlewareGroups中添加CORS中间件：

protected $middlewareGroups = [
    'web' => [
        // 其他中间件
        \Barryvdh\Cors\HandleCors::class,
    ],
    'api' => [
        // 其他中间件
        \Barryvdh\Cors\HandleCors::class,
    ],
];

3. 验证Botman路由可用性 #

直接访问配置的frameEndpoint地址，确保返回正常响应。Laravel中Botman的路由通常配置如下：

// routes/web.php 或 routes/api.php
Route::match(['get', 'post'], '/botman', [BotManController::class, 'handle']);

4. 清除浏览器缓存 #

强制刷新页面（Ctrl+F5）或清除浏览器缓存，避免旧JS文件缓存导致配置不生效。

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