微信小程序本地接口调试配置指南

一、当前配置状态

1.1 后端接口地址配置

文件位置: app/config.js

module.exports = {
  baseUrl: 'http://localhost:8080',  // ✅ 已配置为本地接口
  // ...其他配置
}

1.2 问题说明

微信小程序默认**不允许访问本地接口**（localhost 或 127.0.0.1），会报以下错误：

request:fail url not in domain list
// 或
request:fail -104:net::ERR_CONNECTION_FAILED

二、解决方案（3种方法）

方案1：开发者工具中关闭域名校验（推荐用于开发调试）

这是最简单快速的方法，适合本地开发调试。

步骤：

1. 打开微信开发者工具

• 确保已安装微信开发者工具
• 导入项目：选择 app 目录

1. 关闭域名校验

• 点击右上角"详情"按钮
• 切换到"本地设置"选项卡
• 勾选 ✅ 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

1. 确认配置生效
   javascript // app/config.js 保持 baseUrl: 'http://localhost:8080'

2. 重新编译

• 点击"编译"按钮
• 查看控制台是否有网络请求

优点：

• ✅ 配置简单，立即生效
• ✅ 适合开发调试
• ✅ 不需要修改代码

缺点：

• ❌ 仅在开发者工具中有效
• ❌ 真机预览时无效
• ❌ 正式版本必须配置合法域名

---

方案2：使用内网IP地址（推荐用于真机调试）

使用电脑的内网IP地址替代localhost，可以让手机访问电脑上的后端服务。

步骤：

1. 查找电脑内网IP

Windows系统：
```bash
# 命令行执行
ipconfig

# 查找类似这样的地址
IPv4 地址 . . . . . . . . . . . . : 192.168.1.100
```

Mac/Linux系统：
```bash
# 终端执行
ifconfig

# 或
ip addr show

# 查找以 192.168.x.x 或 10.x.x.x 开头的地址
```

1. 修改配置文件

方法A：直接修改config.js（简单但不灵活）
javascript // app/config.js module.exports = { baseUrl: 'http://192.168.1.100:8080', // 改为你的内网IP // ... }

方法B：环境变量配置（推荐）
javascript // app/config.js module.exports = { // 根据运行环境自动选择 baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.1.100:8080' // 开发环境：内网IP : 'https://api.yourdomain.com', // 生产环境：线上域名 // ... }

1. 确保后端允许跨域访问

检查后端配置（RuoYi框架默认已配置）：
java // ruoyi-framework/src/main/java/com/ruoyi/framework/config/CorsConfig.java @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") // 允许所有来源 .allowCredentials(true) .allowedMethods("GET", "POST", "PUT", "DELETE") .maxAge(3600); }

1. 确保电脑防火墙允许访问

Windows防火墙：
- 控制面板 → Windows Defender 防火墙 → 高级设置
- 入站规则 → 新建规则 → 端口 → TCP → 特定端口 8080
- 允许连接

临时关闭防火墙测试：
```bash
# Windows（管理员权限）
netsh advfirewall set allprofiles state off

# 测试完成后记得打开
netsh advfirewall set allprofiles state on
```

1. 手机和电脑连接同一WiFi

• 确保手机和电脑在同一局域网
• 打开微信开发者工具 → 预览 → 扫码真机调试

优点：

• ✅ 可以真机调试
• ✅ 团队成员可以共享调试
• ✅ 接近真实环境

缺点：

• ❌ IP地址可能会变化
• ❌ 需要配置防火墙
• ❌ 仅限同一局域网

---

方案3：使用内网穿透工具（推荐用于远程调试）

使用内网穿透工具（如花生壳、ngrok、FRP）将本地服务映射到公网域名。

3.1 使用 ngrok（免费且简单）

1. 下载安装 ngrok

• 官网：https://ngrok.com/
• 下载对应系统版本
• 注册账号获取authtoken

1. 启动后端服务
   bash # 确保后端运行在8080端口 cd RuoYi-Vue-master java -jar ruoyi-admin.jar

2. 启动 ngrok
   ```bash
   # Windows
   ngrok.exe http 8080

# Mac/Linux
./ngrok http 8080
```

1. 获取公网地址
   Session Status online Forwarding https://abc123.ngrok.io -> http://localhost:8080 ^^^^^^^^^^^^^^^^^^^^^^^^ 这就是你的公网地址

2. 修改配置
   javascript // app/config.js module.exports = { baseUrl: 'https://abc123.ngrok.io', // ngrok提供的地址 // ... }

3. 在微信小程序后台配置域名

• 登录微信公众平台：https://mp.weixin.qq.com
• 开发 → 开发管理 → 开发设置 → 服务器域名
• 配置 request合法域名：https://abc123.ngrok.io

3.2 使用花生壳（国内稳定）

1. 下载安装花生壳

• 官网：https://hsk.oray.com/
• 注册账号

1. 创建内网穿透映射

• 内网主机：localhost
• 内网端口：8080
• 外网域名：系统分配（如 xxx.vicp.fun）

1. 修改配置
   javascript // app/config.js module.exports = { baseUrl: 'http://xxx.vicp.fun', // 花生壳提供的域名 // ... }

优点：

• ✅ 可以远程访问
• ✅ 稳定的域名
• ✅ 支持HTTPS

缺点：

• ❌ 需要第三方服务
• ❌ 免费版有限制
• ❌ 可能有延迟

---

三、推荐配置方案

3.1 多环境配置（最佳实践）

修改 app/config.js，支持多环境自动切换：

// app/config.js

// 环境配置
const ENV_CONFIG = {
  // 开发环境
  development: {
    baseUrl: 'http://192.168.1.100:8080',  // 修改为你的内网IP
    description: '开发环境'
  },
  // 测试环境
  test: {
    baseUrl: 'http://test.yourdomain.com',
    description: '测试环境'
  },
  // 生产环境
  production: {
    baseUrl: 'https://api.yourdomain.com',
    description: '生产环境'
  }
}

// 当前环境（手动切换）
const CURRENT_ENV = 'development'  // 可选: development, test, production

// 导出配置
module.exports = {
  baseUrl: ENV_CONFIG[CURRENT_ENV].baseUrl,
  
  // 应用信息
  appInfo: {
    name: "民航调度系统",
    version: "1.1.0",
    logo: "/static/logo.png",
    site_url: "http://ruoyi.vip",
    
    // 环境信息（用于调试）
    env: CURRENT_ENV,
    envDescription: ENV_CONFIG[CURRENT_ENV].description,
    
    // 协议（使用本地页面）
    agreements: [
      {
        title: "隐私政策",
        url: "/pages/mine/privacy-policy/index"
      },
      {
        title: "用户服务协议",
        url: "/pages/mine/user-agreement/index"
      }
    ]
  }
}

3.2 显示当前环境信息（调试用）

在首页显示当前使用的接口地址：

<!-- app/pages/index.vue -->
<template>
  <view>
    <!-- 开发环境提示 -->
    <view v-if="isDev" class="dev-info">
      <text>{{ envInfo }}</text>
    </view>
    
    <!-- ...其他内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development',
      envInfo: ''
    }
  },
  onLoad() {
    const config = getApp().globalData.config
    this.envInfo = `环境：${config.appInfo.envDescription}\n接口：${config.baseUrl}`
  }
}
</script>

<style>
.dev-info {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 10rpx;
  font-size: 20rpx;
  text-align: center;
  z-index: 9999;
}
</style>

---

四、完整配置步骤（推荐流程）

步骤1: 启动后端服务

# 进入后端项目目录
cd d:\project\急救转运\code\Api\RuoYi-Vue-master

# 启动后端（确保端口8080）
# 方法1: IDEA直接运行 RuoYiApplication.java
# 方法2: 命令行运行
mvn spring-boot:run

步骤2: 查找电脑内网IP

# Windows
ipconfig

# 找到类似这样的地址
以太网适配器 以太网:
   IPv4 地址 . . . . . . . . . . . . : 192.168.1.100

步骤3: 修改配置文件

// app/config.js
module.exports = {
  baseUrl: 'http://192.168.1.100:8080',  // 改为你的IP
  // ...
}

步骤4: 微信开发者工具配置

1. 打开项目

• HBuilderX → 运行 → 运行到小程序模拟器 → 微信开发者工具
• 或直接在微信开发者工具中导入 app 目录

1. 关闭域名校验

• 详情 → 本地设置
• ✅ 勾选"不校验合法域名..."

1. 清除缓存重新编译

• 工具 → 清除缓存 → 清除所有缓存
• 点击"编译"

步骤5: 验证配置

1. 检查网络请求

• 打开调试器 → Network
• 登录系统，查看请求地址是否正确

1. 测试接口
   javascript // 在控制台执行 console.log(getApp().globalData.config.baseUrl) // 应该输出: http://192.168.1.100:8080

---

五、常见问题排查

问题1: request:fail url not in domain list

原因: 域名校验未关闭

解决:
- 微信开发者工具 → 详情 → 本地设置
- ✅ 勾选"不校验合法域名..."

---

问题2: request:fail -104:net::ERR_CONNECTION_FAILED

原因:
1. 后端服务未启动
2. IP地址错误
3. 防火墙阻止

解决:
```bash

1. 检查后端是否启动

netstat -ano | findstr 8080

2. 检查IP是否正确

ipconfig

3. 测试后端是否可访问

浏览器打开: http://192.168.1.100:8080

---

### 问题3: 真机调试无法访问

**原因**: 手机和电脑不在同一WiFi

**解决**:
1. 确保手机和电脑连接同一WiFi
2. 使用内网IP而非localhost
3. 检查防火墙设置

---

### 问题4: 跨域错误

**原因**: 后端未配置跨域

**解决**:

// ruoyi-framework/src/main/java/com/ruoyi/framework/config/CorsConfig.java
// 确保已配置CORS
```

---

六、不同开发工具的配置

6.1 HBuilderX

1. 运行到微信小程序

• 菜单 → 运行 → 运行到小程序模拟器 → 微信开发者工具

1. 配置微信开发者工具路径

• 工具 → 设置 → 运行配置
• 配置"微信开发者工具路径"

1. manifest.json配置

• 源码视图 → mp-weixin → appid
• 填写你的小程序AppID

6.2 直接使用微信开发者工具

1. 导入项目

• 打开微信开发者工具
• 选择"导入项目"
• 项目目录：app
• AppID：使用测试号或你的AppID

1. 配置

• 详情 → 本地设置 → 不校验域名

---

七、推荐配置（最终版本）

// app/config.js - 完整配置示例

// 自动检测运行环境
const isDev = process.env.NODE_ENV === 'development'
const isMP = process.env.VUE_APP_PLATFORM === 'mp-weixin'

// 获取本地IP（需要手动配置）
const LOCAL_IP = '192.168.1.100'  // ⚠️ 修改为你的电脑IP

// 环境配置
const ENV_CONFIG = {
  // 本地开发
  local: `http://${LOCAL_IP}:8080`,
  
  // 测试环境
  test: 'http://test.yourdomain.com',
  
  // 生产环境
  prod: 'https://api.yourdomain.com'
}

// 自动选择环境
let baseUrl = ENV_CONFIG.local  // 默认本地开发

// 根据不同条件选择环境
if (process.env.UNI_PLATFORM === 'h5' && !isDev) {
  // H5生产环境
  baseUrl = ENV_CONFIG.prod
}

module.exports = {
  baseUrl: baseUrl,
  
  appInfo: {
    name: "民航调度系统",
    version: "1.1.0",
    logo: "/static/logo.png",
    site_url: "http://ruoyi.vip",
    
    // 显示当前环境（开发时可见）
    showEnv: isDev,
    currentEnv: baseUrl,
    
    agreements: [
      {
        title: "隐私政策",
        url: "/pages/mine/privacy-policy/index"
      },
      {
        title: "用户服务协议",
        url: "/pages/mine/user-agreement/index"
      }
    ]
  }
}

---

八、总结

开发阶段推荐方案

场景	推荐方案	配置复杂度
微信开发者工具调试	方案1 + localhost	⭐ 简单
真机调试	方案2 + 内网IP	⭐⭐ 中等
远程调试/演示	方案3 + 内网穿透	⭐⭐⭐ 复杂

快速开始（最简单方式）

1. 启动后端: 运行 RuoYiApplication.java
2. 配置前端: config.js 中 baseUrl: 'http://localhost:8080'
3. 微信工具: 勾选"不校验合法域名"
4. 开始调试: 点击"编译"

注意事项

⚠️ 安全提醒：
- 生产环境必须使用HTTPS域名
- 不要将测试配置提交到代码仓库
- 使用 .env 文件管理敏感配置

⚠️ 性能提醒：
- 内网穿透会增加延迟
- 建议优先使用局域网调试
- 大文件上传建议使用直连

---

如有其他问题，请参考：
- 微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/
- uni-app官方文档：https://uniapp.dcloud.io/