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

【问题标题】：Ionic/Capacitor React App API Requests returning HTML on iOSIonic/Capacitor React App API 请求在 iOS 上返回 HTML
【发布时间】：2022-01-20 19:33:48
【问题描述】：

当前行为：

对 localhost 服务器的所有 API 请求都在 iOS 构建上返回 React.js 应用程序的 index.html 文件，但请求在浏览器和 PWA 构建上工作正常。

预期行为：

请求返回预期的数据（通常是 JSON）。

详情

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

因为路由返回的是 HTML 而不是 JSON 数据，所以我收到以下错误（其中一个错误，因为每个 API 路由都有相同的错误）导致白屏：

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

我尝试将主机名（生产服务器所在的位置）添加到我的根目录中的电容器.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 构建上将我的请求路由到正确的位置？

更新

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

设备控制台输出：

XCode 控制台输出：

【问题讨论】：

我们需要更多信息来提供任何支持
您需要什么信息？服务器在浏览器中返回正确的数据，但对于 iOS 构建，电容器的 iosScheme 似乎是问题，因为不允许使用 HTTP。 @AaronSaunders
本地主机上运行的服务器是什么？除非您在手机上运行服务器，否则您需要重定向到另一个地址才能使 api 工作
我有一个运行在全球托管站点上的生产服务器，该站点适用于 webapp 的实时版本（例如：website.com/api/[route]）以及托管在 localhost 上的开发服务器.如前所述，在配置中将主机名更改为 website.com 或 localhost:5000 并再次构建应用程序不起作用。服务器是用 express.js 构建的，除了这个 iOS 构建之外，一切都可以正常工作。
您将需要提供比您提供的少量代码更多的代码，也许是您更改主机地址但它不起作用的示例。

标签： javascript ios reactjs ionic-framework capacitor

【解决方案1】：

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

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

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

【讨论】：

正如上面在更新部分中提到的，通过将 server.url 配置选项设置为我的服务器的 URL，我能够从生产服务器获取数据，而不是使用相对 URL。但是，该应用程序现在挂在初始屏幕上，没有任何重大错误（如上所示的控制台）
设置 server.url 是没有意义的，如果你设置了 server url 那么你只是在加载一个外部站点而不是加载应用程序资产。
这非常适合我的用例。事实上，它做到了，所以我只需要为所有设备部署一次。
它可能会导致应用被拒绝，但如果您对此感到满意

【解决方案2】：

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

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

第二个问题是确保来自@capacitor/splash-screen 的启动屏幕隐藏代码实际上已部署到 index.js 文件中的 prod 上。

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

【讨论】：