Ionic/Capacitor React App API 请求在 iOS 返回 HTML
Ionic/Capacitor React App API Requests returning HTML on iOS
当前行为:
对本地主机服务器的所有 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 控制台输出:
根据您提供的少量信息,我将尝试猜测问题所在。
- 您使用的是相对 url 而不是绝对 url。如果您对
/api/[route]
进行 XHR/fetch 调用,浏览器会将方案和主机名附加到它,并将其转换为 capacitor://localhost:3000/api/[route]
。 url 属于应用程序,而不属于您 API 所在的网络服务器 运行ning。
- 您正在使用本地主机,本地主机的意思是“本机”,如果您运行浏览器或iOS模拟器中的应用程序,本地主机是浏览器和模拟器以及浏览器所在的机器运行ning,本地服务器也在运行ning在同一台机器上,所以他们访问它没有任何问题。但是,如果您 运行 在真实设备上,本地主机就是设备,并且该设备没有服务器 运行ning。您应该使用服务器所在计算机的本地 IP(数字)运行ning,并且设备应该连接到同一网络才能访问它。
- Capacitor 应用程序受 CORS“影响”,您需要特殊的服务器配置才能允许连接 https://ionicframework.com/docs/troubleshooting/cors。
看起来你在第 1 点,一旦你修复它,你就会到达第 2 点,然后可能是第 3 点。
第一个问题已通过将 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);
当前行为:
对本地主机服务器的所有 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 控制台输出:
根据您提供的少量信息,我将尝试猜测问题所在。
- 您使用的是相对 url 而不是绝对 url。如果您对
/api/[route]
进行 XHR/fetch 调用,浏览器会将方案和主机名附加到它,并将其转换为capacitor://localhost:3000/api/[route]
。 url 属于应用程序,而不属于您 API 所在的网络服务器 运行ning。 - 您正在使用本地主机,本地主机的意思是“本机”,如果您运行浏览器或iOS模拟器中的应用程序,本地主机是浏览器和模拟器以及浏览器所在的机器运行ning,本地服务器也在运行ning在同一台机器上,所以他们访问它没有任何问题。但是,如果您 运行 在真实设备上,本地主机就是设备,并且该设备没有服务器 运行ning。您应该使用服务器所在计算机的本地 IP(数字)运行ning,并且设备应该连接到同一网络才能访问它。
- Capacitor 应用程序受 CORS“影响”,您需要特殊的服务器配置才能允许连接 https://ionicframework.com/docs/troubleshooting/cors。
看起来你在第 1 点,一旦你修复它,你就会到达第 2 点,然后可能是第 3 点。
第一个问题已通过将 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);