From 3c92082ea48b6c2e94e1831b91b64ec07658582e Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 12 Nov 2025 13:30:39 +0800 Subject: [PATCH] =?UTF-8?q?fix(bytedesk):=20=E4=BF=AE=E5=A4=8D=E8=B7=AF?= =?UTF-8?q?=E5=BE=84=E9=85=8D=E7=BD=AE=EF=BC=8C=E7=BB=9F=E4=B8=80=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20/bytedesk/=20=E5=89=8D=E7=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复 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 --- craco.config.js | 18 ++---------------- .../config/bytedesk.config.js | 15 +++++++-------- 2 files changed, 9 insertions(+), 24 deletions(-) diff --git a/craco.config.js b/craco.config.js index 9006f93e..ea82db97 100644 --- a/craco.config.js +++ b/craco.config.js @@ -263,27 +263,13 @@ module.exports = { logLevel: 'debug', pathRewrite: { '^/concept-api': '' }, }, - '/bytedesk-api': { + '/bytedesk': { target: 'https://valuefrontier.cn', // 统一使用生产环境 Nginx 代理 changeOrigin: true, secure: false, // 开发环境禁用 HTTPS 严格验证 logLevel: 'debug', ws: true, // 支持 WebSocket - // 不使用 pathRewrite，保留 /bytedesk-api 前缀，让生产 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 路径 + // 不使用 pathRewrite，保留 /bytedesk 前缀，让生产 Nginx 处理 }, }, }), diff --git a/src/bytedesk-integration/config/bytedesk.config.js b/src/bytedesk-integration/config/bytedesk.config.js index 159f6e08..b0794b93 100644 --- a/src/bytedesk-integration/config/bytedesk.config.js +++ b/src/bytedesk-integration/config/bytedesk.config.js @@ -7,14 +7,13 @@ * REACT_APP_BYTEDESK_SID=df_wg_uid * * 架构说明： - * - iframe 使用完整域名：https://valuefrontier.cn/bytedesk-api/chat/ + * - iframe 使用完整域名：https://valuefrontier.cn/bytedesk/chat/ * - 使用 HTTPS 协议，解决生产环境 Mixed Content 错误 - * - 本地：CRACO 代理到 valuefrontier.cn/bytedesk-api/ - * - 生产：前端 Nginx 代理到 valuefrontier.cn/bytedesk-api/ - * - 后端：Nginx 转发到 43.143.189.195 + * - 本地：CRACO 代理 /bytedesk → valuefrontier.cn/bytedesk + * - 生产：前端 Nginx 代理 /bytedesk → 43.143.189.195 * - 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 = { // API服务地址（如果 SDK 需要调用 API） - apiUrl: '/bytedesk-api/', - // 聊天页面地址（使用完整 HTTPS 域名，通过 /bytedesk-api/ 代理避免 React Router 冲突） - htmlUrl: 'https://valuefrontier.cn/bytedesk-api/chat/', + apiUrl: '/bytedesk/', + // 聊天页面地址（使用完整 HTTPS 域名，通过 /bytedesk/ 代理避免 React Router 冲突） + htmlUrl: 'https://valuefrontier.cn/bytedesk/chat/', // SDK 资源基础路径（保持 Bytedesk 官方 CDN，用于加载外部模块） baseUrl: 'https://www.weiyuai.cn',