Web 应用部署后发送消息失败排查记录

一、问题描述

部署到生产环境后，聊天功能发送消息失败，显示"发送失败"错误提示。但本地开发环境一切正常。

环境信息：

• 前端：Vue 3 + Vite，Nginx 部署
• 后端：Spring Boot 2.7.2
• 部署：Docker Compose
• 访问地址：http://139.199.158.118:9001

二、排查过程

2.1 初步检查

1. 确认前后端是否有报错 — 没有错误日志
2. 检查 Nginx 配置 — WebSocket 代理配置问题
3. 检查网络请求 — 惊讶发现：没有 API 请求发出

2.2 WebSocket 连接问题

首先发现 WebSocket 连接失败：

▼
text
复制代码
WebSocket connection to 'ws://139.199.158.118:9001/api/ws/chat' failed

排查 Nginx 配置，发现：

• 后端 context-path: /api
• WebSocket 端点完整路径是 /api/ws/chat
• Nginx 需要正确代理 WebSocket 连接

修复 Nginx 配置后，WebSocket 连接成功，但消息仍然发送失败。

2.3 深入排查

由于没有 API 请求发出，从浏览器 Console 逐步排查：

1. 确认用户登录状态 — 正常
2. 确认 conversationId — 正常
3. 手动测试 API 调用 — 成功！

手动 fetch 调用成功说明：

• 网络没问题
• 后端 API 没问题
• Cookie 认证也没问题

问题一定在前端代码中。

2.4 定位根因

通过 Console 直接调用 chatStore.sendMessage() 方法：

▼
javascript
复制代码
chatStore.sendMessage('2038981077471002625', {
  messageType: 1,
  content: '测试',
  senderId: '2038274525120315394'
})

终于看到错误：

▼
text
复制代码
TypeError: crypto.randomUUID is not a function

三、根因分析

3.1 技术原因

crypto.randomUUID() 只在安全上下文（Secure Context）中可用：

3.2 为什么本地正常？

本地开发环境使用 http://localhost:5173，属于安全上下文，crypto.randomUUID() 可用。

生产环境使用 http://139.199.158.118:9001（HTTP + IP地址），不属于安全上下文，API 不可用。

3.3 浏览器检测结果

▼
javascript
复制代码
// 生产环境 Console 输出
User-Agent: Mozilla/5.0 ... Chrome/144.0.0.0
crypto.randomUUID: undefined  // ← 不可用
location.protocol: http:
location.hostname: 139.199.158.118

四、解决方案

4.1 代码修复

添加兼容性处理：

▼
javascript
复制代码
// 修改前
const clientMsgId = crypto.randomUUID()

// 修改后
const clientMsgId = typeof crypto?.randomUUID === 'function'
  ? crypto.randomUUID()
  : `msg-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`

4.2 长期方案

配置 HTTPS 证书，使生产环境也使用安全上下文。

五、经验总结

1. "本地正常生产异常" — 考虑环境差异，特别是安全上下文、协议差异
2. 没有网络请求 — 代码在调用前就出错，用 Console 直接调试比看日志更高效
3. 安全上下文限制 — crypto.randomUUID()、Service Worker 等 API 需要安全上下文
4. 调试技巧 — 通过 document.querySelector('#app').__vue_app__ 访问 Vue 应用实例进行调试
5. Nginx WebSocket 代理 — 需要设置 Upgrade 和 Connection 头，以及更长的超时时间