Capacitor 打包 Android 后无法访问本地 API 接口怎么办？

欧阳爱丹提问于 2026-03-09 14:33:24 阅读 15

框架

我用 Capacitor 把 Vue 项目打包成 Android 应用，本地开发时接口都正常，但装到手机上后所有 fetch('/api/xxx') 请求都失败了，控制台报网络错误。

试过在 capacitor.config.ts 里加 server 配置，也试过把接口地址改成完整 URL，但还是不行。是不是 Android 端默认不允许访问本地服务器？该怎么配置才能让 App 正常请求开发机上的接口？

const { CapacitorConfig } = require('@capacitor/cli');

const config = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  server: {
    url: 'http://192.168.1.100:3000', // 开发机 IP
    cleartext: true
  }
};

module.exports = config;

跨端方案

我来解答赞 1 收藏

反馈

1 条解答

轩辕惠泽 Lv1

这个问题主要涉及Android的网络访问权限和CORS问题。你配置的方向是对的，但还差几个关键点。

首先确保你手机和开发机在同一个局域网，直接用手机浏览器访问http://192.168.1.100:3000/api/xxx看能不能通。如果不行就是网络问题。

然后在AndroidManifest.xml里加上网络权限：

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

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

你server配置里的cleartext只对Capacitor内置服务器有效，要允许访问外部http地址还得在AndroidManifest的application标签里加：

android:usesCleartextTraffic="true"

性能上建议最终打包时把API地址换成https的，http只在开发时用。上线前记得移除cleartext配置。

另外你Vue代码里的fetch请求最好直接用完整URL，不要用相对路径。可以这样：

fetch('http://192.168.1.100:3000/api/xxx')

最后检查下后端API是否设置了CORS头，开发时可以临时允许所有来源：

Access-Control-Allow-Origin: *

这些都配完应该就能通了。我上次搞这个也折腾了半天，Android这网络权限设计真够烦的。

2026-03-09 15:03