问题描述
我正在尝试通过 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 实例,这现在就可以工作。否则,您只会无声无息地无法同步。