Ionic/Capacitor React App API 请求在 iOS 返回 HTML

Question

当前行为：

对本地主机服务器的所有 API 请求都是 returning iOS 构建上的 React.js 应用程序的 index.html 文件，但请求有效适用于浏览器和 PWA 构建。

预期行为：

请求 return 预期数据（通常 JSON）。

---

详情

通常，API 请求会转到 http://localhost:3000/api/[route]。在 iOS 构建中，他们将连接到电容器：//localhost/api/[route]

因为路由是 returning HTML 而不是 JSON 数据，我收到以下错误（许多错误之一，因为每个 API 路由都有同样的错误）导致白屏：

TypeError: undefined is not a function (near '...a.map...')

我尝试将主机名（生产服务器所在的位置）添加到根目录中的 capacitor.config.json 文件中，但仍然失败。开发 API 服务器在 localhost:3000 上 运行。

也尝试在配置中将服务器主机名设置为“localhost:3000”。

"server": {
    "hostname": "localhost:3000"
  },

“http”不允许作为电容器配置文档中提到的 iosScheme： 不能设置为 WKWebView 已经处理的方案，例如 http 或 https](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/2875766-seturlschemehandler)

因为该站点在除此 iOS 版本之外的所有其他版本上都有效，所以问题应该出在这里...

如何将我对 iOS 构建的请求路由到正确的位置？

更新

如果我将 capacitor.config.json 文件中的 server.url 选项设置为 https://www.website.com，我可以从我的生产服务器中提取数据，但是当授权检查 returns 一个 401，应用程序似乎挂在初始屏幕上，我在控制台中收到的唯一类似错误的消息是响应 returned a 401（如预期）

设备控制台输出：

XCode 控制台输出：

Answer 1

根据您提供的少量信息，我将尝试猜测问题所在。

1. 您使用的是相对 url 而不是绝对 url。如果您对 /api/[route] 进行 XHR/fetch 调用，浏览器会将方案和主机名附加到它，并将其转换为 capacitor://localhost:3000/api/[route]。 url 属于应用程序，而不属于您 API 所在的网络服务器 运行ning。
2. 您正在使用本地主机，本地主机的意思是“本机”，如果您运行浏览器或iOS模拟器中的应用程序，本地主机是浏览​​器和模拟器以及浏览器所在的机器运行ning，本地服务器也在运行ning在同一台机器上，所以他们访问它没有任何问题。但是，如果您 运行 在真实设备上，本地主机就是设备，并且该设备没有服务器 运行ning。您应该使用服务器所在计算机的本地 IP（数字）运行ning，并且设备应该连接到同一网络才能访问它。
3. Capacitor 应用程序受 CORS“影响”，您需要特殊的服务器配置才能允许连接 https://ionicframework.com/docs/troubleshooting/cors。

看起来你在第 1 点，一旦你修复它，你就会到达第 2 点，然后可能是第 3 点。

Answer 2

第一个问题已通过将 capacitor.config.json 文件中的 server.url 参数设置为生产服务器的 URL 来解决：

"server":{
    "url":"https://www.website.com"
}

第二个问题是确保来自@capacitor/splash-screen 的闪屏隐藏代码实际部署到产品中的 index.js 文件中。

import { SplashScreen } from '@capacitor/splash-screen';
setTimeout(() => {
  SplashScreen.hide();
}, 2000);