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:
@@ -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 路径
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user