離子/電容器反應應用程序 API 請求在 iOS 上返回 HTML

Question

賞金將在 6 天后到期。 此問題的答案有資格獲得+50聲望賞金。 肖恩穆迪正在尋找一個有信譽的來源的答案：

從生產服務器提取數據的工作 iOS 應用程序

當前行為：

所有 API 對 localhost 服務器的請求都返回 index.html 文件 iOS 構建上的 iOS 構建的 React.js 應用程序，但請求在瀏覽器和 PWA 構建上工作正常。

預期的行為：

請求返回預期的數據（通常是 JSON）。

---

細節

通常，API 向 http://localhost:3000/api/[route] 請求 go。 在 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 構建上的請求路由到正確的位置？

更新

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（如預期的那樣）

設備控制台 output：

XCode 控制台 output：

Answer 1

根據您提供的少量信息，我將嘗試猜測出了什么問題。

1. 您使用的是相對 url 而不是絕對 url。 如果您對/api/[route]進行 XHR/fetch 調用，瀏覽器將 append 向其發送方案和主機名，並將其轉換為capacitor://localhost:3000/api/[route] 。 那 url 屬於應用程序，而不是 API 正在運行的 web 服務器。
2. 你使用的是localhost，localhost的意思是“本機”，如果你在瀏覽器或者iOS模擬器中運行app，localhost就是運行瀏覽器和模擬器和瀏覽器的機器，本地服務器也運行在同一台機器上，所以他們訪問它沒有任何問題。 但是如果你在真實設備上運行，localhost 就是設備，並且設備沒有運行服務器。 您應該使用運行服務器的計算機的本地 IP（數字），並且設備應該連接到同一網絡才能訪問它。
3. 電容器應用程序受到 CORS 的“影響”，您需要特殊的服務器配置以允許連接https://ionicframework.com/docs/troubleshooting/cors 。

看起來你在第 1 點，一旦你修復它，你會達到第 2 點，然后可能會達到第 3 點。

Answer 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);