为什么我无法从 Android 上的 Capacitor 应用程序“获取”某些 URL?

问题描述

我正在尝试通过 Capacitor 编写一个使用 PouchDB 的移动应用程序。当我通过 Android Studio 在模拟器中运行应用程序时,与远程 CouchDB 实例的连接失败。我已将其追溯到在 Android 上运行时某些网址的 fetch API 失败。

为了调试,我制作了一个最小的 Web 应用程序,并使用 Capacitor 封装它以在 Android 上运行。该应用程序包含以下代码

const testFetch = (url) => {
    console.log("Testing fetch",url)
    fetch(url)
        .then((response) => response.text())
        .then((t) => {
            console.log("Respose from fetch:",url)
            console.log(t)
            console.log("that was it")
        })
        .catch((reason) => {
            console.log("FETCH Failed",url,reason)
        })
}

然后我进行了三个测试:

  testFetch("https://jsonplaceholder.typicode.com/todos/1");   // just some JSON 
  testFetch("http://10.0.2.2:5984/simple");    // local pouchdb instance 
  testFetch("http://10.0.2.2:8080/sample.json");  // local http server + CORS 

后两个使用在 Android 模拟器中运行时作为开发机器别名的 IP 地址。我确认我可以从模拟器上的浏览器访问所有这些 URL,但应用程序在第一个上成功,在第二个上失败(错误TypeError: Failed to fetch)。在浏览器中运行基本 Web 应用程序时,一切都会成功(使用 localhost 而不是 10.0.2.2)。

所有 URL 上都有 CORS 标头。据我所知,该应用程序甚至没有尝试访问失败的两台服务器 - 例如没有 HEAD 请求。我还尝试了各种其他 URL,但看不到失败的模式——例如。这不是端口号!= 80。

任何有关正在发生的事情的线索将不胜感激。

解决方法

所以我没有注意到失败的 URL 的共同点是 http 而不是 https。事实证明,fetch 对任何 http URL 都无能为力,只是给出错误“无法获取”。

我不确定这是 Android 网络视图的功能还是 Capacitor 本身的功能。 Capacitor 文档建议 using https is a good idea 但不是 http 不起作用。

在主页标题中设置内容安全策略不会改变此策略。

最初的目标是将本地 PouchDB 数据库连接到远程 CouchDB 实例。只要通过 https 提供 CouchDB 实例,这现在就可以工作。否则,您只会无声无息地无法同步。