移动端Ionic应用无法访问本地localhost API登录问题

核心问题定位 #

你代码里写的http://localhost:3625，在手机端运行时，localhost指向的是手机自身，而非你的开发电脑服务器，这是请求失败的根本原因。

具体解决步骤 #

• 替换API地址为开发电脑的局域网IP

  1. 确保手机和开发电脑连接在同一WiFi局域网下
  2. 找到开发电脑的局域网IP：
     • Windows：打开命令提示符，执行ipconfig，找到无线网卡的IPv4地址
     • Mac/Linux：打开终端，执行ifconfig或ip addr，找到对应网卡的IP
  3. 修改API地址，把localhost换成查到的IP，示例：

     var url2 = "http://192.168.1.100:3625/api/Filters/LoginEmployee";
     

• 排查网络权限与跨域配置

  1. 确认AndroidManifest.xml中已添加网络权限：

     <uses-permission android:name="android.permission.INTERNET"/>
     

  2. 检查后端API服务器是否允许跨域请求（可在服务器配置CORS规则，允许手机端访问来源）
  3. 如果使用Capacitor，在capacitor.config.ts中配置服务器允许导航到API地址：

     export default defineConfig({
       server: {
         allowNavigation: ["http://192.168.1.100:3625"]
       }
     });
     

• 获取具体错误信息
  当前控制台仅显示ERROR [object Object]，无法定位细节，建议在API请求的catch块中打印完整错误：

  fetch(url2, options)
    .then(response => response.json())
    .catch(error => {
      console.error("登录请求错误详情:", JSON.stringify(error));
      // 或打印error.message、error.status等具体字段
    });
  

  这样能明确是网络连接失败、404错误还是权限问题，方便进一步排查。

内容的提问来源于stack exchange，提问作者Ahumada