xinli/检查二维码URL的方法.md

检查二维码URL的方法

方法一：在二维码管理页面查看（推荐）

步骤：

1. 登录管理系统
2. 进入"二维码管理"页面
3. 找到要检查的二维码记录
4. 点击"查看二维码"按钮
5. 在二维码预览对话框中，可以看到二维码图片
6. 查看浏览器控制台：
   • 按 F12 打开开发者工具
   • 切换到 Console（控制台）标签
   • 在控制台中输入以下代码查看二维码URL：

   // 查看当前页面的二维码数据
   console.log('二维码列表数据:', document.querySelectorAll('.el-table__body tr'));
   

或者直接查看网络请求：

1. 打开浏览器开发者工具（F12）
2. 切换到 Network（网络）标签
3. 刷新二维码管理页面
4. 找到获取二维码列表的请求（通常是 /psychology/qrcode/list）
5. 查看响应数据，找到 qrcodeUrl 字段
6. 或者找到获取二维码图片的请求（通常是 /psychology/qrcode/image/{qrcodeId}）
7. 查看响应数据中的URL

方法二：解码二维码查看内容

使用在线工具：

1. 访问在线二维码解码工具，例如：
   • https://www.qrcode-monkey.com/qr-code-decoder/
   • https://zxing.org/w/decode.jspx
2. 上传二维码图片或输入二维码图片URL
3. 查看解码后的文本内容，这就是二维码的URL

使用手机扫码：

1. 使用手机扫描二维码
2. 查看手机浏览器地址栏中的URL
3. 检查URL是否正确：
   • ✅ 正确格式：http://192.168.1.183/psychology/qrcode/scan/xxx
   • ❌ 错误格式：http://192.168.1.183:30081//psychology/qrcode/scan/xxx

方法三：检查后端日志

步骤：

1. 查看后端控制台日志
2. 找到二维码生成相关的日志
3. 查找包含 buildServerAddress 或 buildQrcodeContent 的日志
4. 查看实际生成的URL

添加调试日志（可选）：

如果需要更详细的日志，可以在代码中添加：

// 在 PsyQrcodeController.java 的 enrichQrcodeWithBase64() 方法中
String serverAddress = buildServerAddress();
log.info("构建的服务器地址: {}", serverAddress);

// 在 PsyQrcodeServiceImpl.java 的 buildQrcodeContent() 方法中
String content = buildQrcodeContent(qrcode, serverAddress);
log.info("生成的二维码URL: {}", content);

方法四：直接测试URL访问

步骤：

1. 从二维码管理页面获取二维码编码（qrcodeCode）
2. 手动构建URL：http://192.168.1.183/psychology/qrcode/scan/{qrcodeCode}
3. 在浏览器中直接访问该URL
4. 检查是否能正常访问：
   • ✅ 能访问：URL正确
   • ❌ 不能访问：检查URL格式和网络连接

方法五：使用浏览器开发者工具检查

步骤：

1. 打开二维码管理页面
2. 按 F12 打开开发者工具
3. 切换到 Network（网络）标签
4. 点击"查看二维码"按钮
5. 在Network标签中找到获取二维码图片的请求
6. 查看请求URL和响应数据
7. 检查响应中的 qrcodeUrl 字段

或者使用控制台：

在浏览器控制台中输入：

// 获取二维码图片的Base64数据
const qrcodeImage = document.querySelector('img[src^="data:image"]');
if (qrcodeImage) {
  console.log('二维码图片URL:', qrcodeImage.src);
  // Base64数据很长，可以截取前100个字符查看
  console.log('二维码URL前缀:', qrcodeImage.src.substring(0, 100));
}

检查URL正确性的标准

✅ 正确的URL格式：

• http://192.168.1.183/psychology/qrcode/scan/xxx
• http://localhost/psychology/qrcode/scan/xxx
• 不包含 :30081 端口号
• 不包含双斜杠 //
• 路径格式正确：/psychology/qrcode/scan/{qrcodeCode}

❌ 错误的URL格式：

• http://192.168.1.183:30081/psychology/qrcode/scan/xxx（包含30081端口）
• http://192.168.1.183//psychology/qrcode/scan/xxx（包含双斜杠）
• http://192.168.1.183:30081//psychology/qrcode/scan/xxx（包含端口和双斜杠）

快速检查脚本

在浏览器控制台中运行以下脚本，可以快速检查所有二维码的URL：

// 检查二维码列表中的URL
fetch('/dev-api/psychology/qrcode/list', {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
})
.then(res => res.json())
.then(data => {
  if (data.code === 200 && data.rows) {
    console.log('二维码列表:');
    data.rows.forEach((qrcode, index) => {
      console.log(`${index + 1}. 编码: ${qrcode.qrcodeCode}`);
      console.log(`   类型: ${qrcode.qrcodeType}`);
      // 如果有qrcodeUrl，检查URL格式
      if (qrcode.qrcodeUrl) {
        const urlMatch = qrcode.qrcodeUrl.match(/http[s]?:\/\/[^"']+/);
        if (urlMatch) {
          const url = urlMatch[0];
          console.log(`   URL: ${url}`);
          // 检查是否有问题
          if (url.includes(':30081')) {
            console.warn('   ⚠️ 警告：URL包含30081端口！');
          }
          if (url.includes('//')) {
            console.warn('   ⚠️ 警告：URL包含双斜杠！');
          }
        }
      }
    });
  }
});

常见问题排查

问题1：URL包含30081端口

原因：buildServerAddress() 方法没有正确识别后端端口 解决：检查后端日志，确认 serverPort 是否为30081

问题2：URL包含双斜杠

原因：路径拼接时产生了双斜杠 解决：检查 contextPath 是否为 /，如果是则应该被忽略

问题3：URL无法访问

原因：

• URL格式错误
• 网络连接问题
• 前端服务未运行 解决：
• 检查URL格式
• 确认前端服务运行在80端口
• 确认手机和电脑在同一局域网内

推荐检查流程

1. 生成二维码后立即检查：

   • 在二维码管理页面查看二维码
   • 使用浏览器开发者工具查看网络请求
   • 检查URL格式是否正确

2. 测试扫码功能：

   • 使用手机扫描二维码
   • 检查是否能正常访问
   • 查看手机浏览器地址栏中的URL

3. 如果发现问题：

   • 检查后端日志
   • 重新生成二维码
   • 确认修复后再次测试