Ionic应用打包后无法访问本地服务器API问题求助

这个问题我之前帮同事排查过，踩过类似的坑，主要是URL格式不规范和混合应用的网络安全限制这两个原因导致的，咱们一步步来解决：

1. 先解决最直接的URL格式问题 #

你现在用的API地址192.168.88.195:8080/rbs0.0.1/api/tableList缺少了协议头（http://），本地浏览器会自动补全，但Ionic打包后的WebView对URL的校验更严格，直接用这种格式会触发Failed to execute 'open' on 'XMLHttpRequest': Invalid URL错误。

解决方案：给URL加上http://前缀，改成：

http://192.168.88.195:8080/rbs0.0.1/api/tableList

2. 处理平台级的网络安全限制 #

即使补全了协议头，你可能还会遇到无法访问的情况，这是因为Android和iOS对混合应用的网络请求有默认的安全限制：

针对Android（以Capacitor为例） #

Android 9及以上版本默认禁止明文HTTP请求（非HTTPS），需要配置允许指定域名的明文流量：

1. 在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">192.168.88.195</domain>
       </domain-config>
   </network-security-config>
   

2. 打开android/app/src/main/AndroidManifest.xml，在<application>标签中添加配置引用：

   <application
       ...
       android:networkSecurityConfig="@xml/network_security_config">
   

针对iOS（以Capacitor为例） #

iOS的App Transport Security（ATS）默认也会限制非HTTPS请求，需要在Info.plist中添加例外：
打开ios/App/App/Info.plist，添加以下配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <false/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>192.168.88.195</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

3. 检查Ionic的Content Security Policy（CSP）配置 #

最后，确保你的index.html中的CSP meta标签允许访问这个API域名，修改对应的default-src规则：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://192.168.88.195:8080 data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

按照以上步骤调整后，重新打包应用应该就能正常访问局域网API了～

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