[英]Ionic/Capacitor React App API Requests returning HTML on iOS
All API requests to the localhost server are returning the index.html file of the React.js app on the iOS build, but requests work fine on browser and PWA builds.所有 API 对 localhost 服务器的请求都返回 index.html 文件 iOS 构建上的 iOS 构建的 React.js 应用程序,但请求在浏览器和 PWA 构建上工作正常。
Requests return the intended data (usually JSON).请求返回预期的数据(通常是 JSON)。
Typically, API requests go to http://localhost:3000/api/[route].通常,API 向 http://localhost:3000/api/[route] 请求 go。 In the iOS build, they are going to capacitor://localhost/api/[route]
在 iOS 构建中,他们将访问电容器://localhost/api/[route]
Because the route is returning HTML and not JSON data, I am getting the following error (one of many, as each API route, has the same error) which causes a white screen:因为该路线返回 HTML 而不是 JSON 数据,所以我收到以下错误(其中一个错误,因为每个 API 路线都有相同的错误)导致白屏:
TypeError: undefined is not a function (near '...a.map...')
I tried adding a hostname (location where the production server is hosted) to the capacitor.config.json file in my root directory, but it still fails.我尝试将主机名(生产服务器所在的位置)添加到我的根目录中的电容器.config.json 文件中,但它仍然失败。 Dev API server is running on localhost:3000.
开发 API 服务器在 localhost:3000 上运行。
Tried setting the server hostname to "localhost:3000" in the config as well.尝试在配置中将服务器主机名设置为“localhost:3000”。
"server": {
"hostname": "localhost:3000"
},
"http" is not allowed as a iosScheme as mentioned in the docs for the capacitor config: Can't be set to schemes that the WKWebView already handles, such as http or https]( https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/2875766-seturlschemehandler )正如电容器配置文档中提到的那样,“http”不允许作为 iosScheme:不能设置为 WKWebView 已经处理的方案,例如 http 或 https]( https://developer.apple.com/documentation /webkit/wkwebviewconfiguration/2875766-seturlschemehandler )
Because the site works on every other build other than this iOS build, the issue should be here...因为该站点适用于除此 iOS 构建之外的所有其他构建,所以问题应该在这里......
How can I route my requests on the iOS build to direct to the correct location?如何将我在 iOS 构建上的请求路由到正确的位置?
If I set the server.url option in the capacitor.config.json file to https://www.website.com , I'm able to pull data from my production server, but when the authorization check returns a 401, the app seems to hang on the splash screen and the only error-like message I get in the console is that the response returned a 401 (as expected) If I set the server.url option in the capacitor.config.json file to https://www.website.com , I'm able to pull data from my production server, but when the authorization check returns a 401, the app似乎挂在启动屏幕上,我在控制台中收到的唯一类似错误的消息是响应返回了 401(如预期的那样)
By the little information you have provided I'll try to guess what's wrong.根据您提供的少量信息,我将尝试猜测出了什么问题。
/api/[route]
, the browser will append the scheme and host name to it and will turn it into capacitor://localhost:3000/api/[route]
./api/[route]
进行 XHR/fetch 调用,浏览器将 append 向其发送方案和主机名,并将其转换为capacitor://localhost:3000/api/[route]
。 That url belongs to the app, not to the web server where you API is running. Looks like you are on the point 1, once you fix it you'll hit point 2 and then probably point 3 after that.看起来你在第 1 点,一旦你修复它,你会达到第 2 点,然后可能会达到第 3 点。
The first issue was fixed by setting the server.url parameter in the capacitor.config.json file to the URL of the production server:第一个问题是通过将电容器.config.json文件中的server.url参数设置为生产服务器的URL来解决的:
"server":{
"url":"https://www.website.com"
}
Second issue was making sure the splash screen hide code from @capacitor/splash-screen was actually deployed onto prod in the index.js file.第二个问题是确保来自@capacitor/splash-screen 的启动屏幕隐藏代码实际上已部署到 index.js 文件中的 prod 上。
import { SplashScreen } from '@capacitor/splash-screen';
setTimeout(() => {
SplashScreen.hide();
}, 2000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.