fix(bytedesk): 修复路径配置,统一使用 /bytedesk/ 前缀

修复 Bytedesk 客服系统路径不匹配问题,统一前端、CRACO 和 Nginx 配置。

## 问题
- 前端配置使用 `/bytedesk-api/` 路径
- 生产 Nginx 配置使用 `/bytedesk/` 路径
- 路径不匹配导致请求 404 或被 React Router 拦截

## 解决方案
统一使用 `/bytedesk/` 路径前缀,避免 React Router 冲突

## 代码变更

### src/bytedesk-integration/config/bytedesk.config.js
- `htmlUrl`: `/bytedesk-api/chat/` → `/bytedesk/chat/`
- `apiUrl`: `/bytedesk-api/` → `/bytedesk/`
- 更新配置注释,说明代理架构

### craco.config.js
- 代理前缀:`/bytedesk-api` → `/bytedesk`
- 删除冗余代理:`/chat` 和 `/config`(Nginx 统一处理)
- 简化配置,减少代理规则数量

## 请求链路
```
浏览器 → /bytedesk/chat/
    ↓
CRACO/Nginx → location /bytedesk/ {}
    ↓
代理转发 → http://43.143.189.195/chat/ Bytedesk 聊天窗口
```

## 优势
-  前端、CRACO、Nginx 路径统一
-  避免 React Router 冲突
-  简化代理配置
-  无需修改服务器 Nginx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-12 13:30:39 +08:00
parent 5524826edd
commit e32a500247
2 changed files with 9 additions and 24 deletions

View File

@@ -263,27 +263,13 @@ module.exports = {
logLevel: 'debug', logLevel: 'debug',
pathRewrite: { '^/concept-api': '' }, pathRewrite: { '^/concept-api': '' },
}, },
'/bytedesk-api': { '/bytedesk': {
target: 'https://valuefrontier.cn', // 统一使用生产环境 Nginx 代理 target: 'https://valuefrontier.cn', // 统一使用生产环境 Nginx 代理
changeOrigin: true, changeOrigin: true,
secure: false, // 开发环境禁用 HTTPS 严格验证 secure: false, // 开发环境禁用 HTTPS 严格验证
logLevel: 'debug', logLevel: 'debug',
ws: true, // 支持 WebSocket ws: true, // 支持 WebSocket
// 不使用 pathRewrite保留 /bytedesk-api 前缀,让生产 Nginx 处理 // 不使用 pathRewrite保留 /bytedesk 前缀,让生产 Nginx 处理
},
'/chat': {
target: 'https://valuefrontier.cn/bytedesk-api', // Bytedesk iframe 内部的资源SDK、CSS等
changeOrigin: true,
secure: false, // 开发环境禁用 HTTPS 严格验证
logLevel: 'debug',
// 保留 /chat 路径
},
'/config': {
target: 'https://valuefrontier.cn/bytedesk-api', // Bytedesk 配置接口
changeOrigin: true,
secure: false, // 开发环境禁用 HTTPS 严格验证
logLevel: 'debug',
// 保留 /config 路径
}, },
}, },
}), }),

View File

@@ -7,14 +7,13 @@
* REACT_APP_BYTEDESK_SID=df_wg_uid * REACT_APP_BYTEDESK_SID=df_wg_uid
* *
* 架构说明: * 架构说明:
* - iframe 使用完整域名https://valuefrontier.cn/bytedesk-api/chat/ * - iframe 使用完整域名https://valuefrontier.cn/bytedesk/chat/
* - 使用 HTTPS 协议,解决生产环境 Mixed Content 错误 * - 使用 HTTPS 协议,解决生产环境 Mixed Content 错误
* - 本地CRACO 代理 valuefrontier.cn/bytedesk-api/ * - 本地CRACO 代理 /bytedesk → valuefrontier.cn/bytedesk
* - 生产:前端 Nginx 代理到 valuefrontier.cn/bytedesk-api/ * - 生产:前端 Nginx 代理 /bytedesk → 43.143.189.195
* - 后端Nginx 转发到 43.143.189.195
* - baseUrl 保持官方 CDN用于加载 SDK 外部模块) * - baseUrl 保持官方 CDN用于加载 SDK 外部模块)
* *
* ⚠️ 注意:需要前端 Nginx 配置 /chat/ 和 /config/ 代理规则 * ⚠️ 注意:需要前端 Nginx 配置 /bytedesk/ 代理规则
*/ */
// 从环境变量读取配置 // 从环境变量读取配置
@@ -26,9 +25,9 @@ const BYTEDESK_SID = process.env.REACT_APP_BYTEDESK_SID || 'df_wg_uid';
*/ */
export const bytedeskConfig = { export const bytedeskConfig = {
// API服务地址如果 SDK 需要调用 API // API服务地址如果 SDK 需要调用 API
apiUrl: '/bytedesk-api/', apiUrl: '/bytedesk/',
// 聊天页面地址(使用完整 HTTPS 域名,通过 /bytedesk-api/ 代理避免 React Router 冲突) // 聊天页面地址(使用完整 HTTPS 域名,通过 /bytedesk/ 代理避免 React Router 冲突)
htmlUrl: 'https://valuefrontier.cn/bytedesk-api/chat/', htmlUrl: 'https://valuefrontier.cn/bytedesk/chat/',
// SDK 资源基础路径(保持 Bytedesk 官方 CDN用于加载外部模块 // SDK 资源基础路径(保持 Bytedesk 官方 CDN用于加载外部模块
baseUrl: 'https://www.weiyuai.cn', baseUrl: 'https://www.weiyuai.cn',