基于Capacitor将Angular13+ Web App转移动端的API连接问题

可能的原因及排查步骤 #

1. 网络安全配置限制（最常见） #

Android 9及以上版本默认禁止明文HTTP请求，若你的API使用HTTP而非HTTPS，需配置网络安全策略：

• 在android/app/src/main/res/xml目录下创建network_security_config.xml，写入以下内容：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">你的API域名/IP地址</domain>
    </domain-config>
</network-security-config>

• 在AndroidManifest.xml的<application>标签中添加引用：

android:networkSecurityConfig="@xml/network_security_config"

2. API服务器的访问权限限制 #

• 本地测试场景：若API部署在本地localhost，Android模拟器需用10.0.2.2替代localhost；真机测试需确保手机和服务器在同一局域网，使用服务器的局域网IP地址
• 检查PHP后端是否有请求头拦截逻辑：Capacitor发起的请求会带有Capacitor标识的User-Agent，若后端仅允许浏览器请求头，会被拦截

3. PHP后端CORS配置问题 #

虽然Capacitor是原生应用，不受浏览器CORS规则约束，但部分PHP框架仍会校验请求Origin头。可在PHP接口中添加通用CORS配置：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

生产环境建议将*替换为你的应用专属标识（如Capacitor应用ID）。

4. Angular代理配置残留 #

若Angular开发阶段使用了proxy.conf.json做本地代理，打包后需确保API端点已替换为真实服务器地址，而非代理路径。检查Angular服务中的API调用代码，确认端点为完整的服务器URL。

5. 无需额外Capacitor插件 #

调用普通HTTP/HTTPS API无需额外插件，Angular原生的HttpClient即可正常使用。

调试建议 #

• 在Android Studio的Logcat中过滤OkHttp或Http关键词，查看请求的具体错误信息（如连接超时、403/404响应码）
• 使用Chrome DevTools（chrome://inspect）连接Android模拟器，查看网络请求的详细参数，对比浏览器中的请求差异

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