POST 請求在 IONIC 應用程序中的 iOS 設備上不起作用

Question

我試圖從 iOS 設備（Xcode 中的 iOS 模擬器）向我的服務器發出后請求。 我正在使用 ionic 5 和 VueJS 以及 @capacitor-community/http。 所以我的代碼看起來像：

methods: {

async submitForm(){
  const form_data = this.$store.getters.my_data;
  const options = {
    url: 'https://my_domain.com/api/page.php',
    headers: {"Content-Type": "application/json"},
    data: form_data,
  };

  await Http.post(options)
      .then(res => {
        if (res.status === 200) {
          console.log(res.data)
        }
      })
      .catch((err) => {
        console.log(err)
      });

}

我沒有提交按鈕，也沒有在方法中使用 prevent

當我在 web 中運行我的項目進行測試時 - 我沒有問題。 GET 和 POST 請求工作正常（作為 web 應用程序測試時，我必須刪除標題：{“Content-Type”：“application/json”} 以防止 CORS 問題）。

所以，接下來我運行：

 ionic build
 npx cap copy

然后我嘗試 android 模擬器（在 android-studio 內）。 而且我的應用程序也很好用（所有類型的請求）。 構建的 android 應用程序也可以在真實設備上完美運行。

但是當涉及到 iOS... GET 請求工作正常，正如預期的那樣。 但是當我按下初始化 POST 請求的按鈕時 - 沒有任何反應。 沒有錯誤……沒有警報……沒有日志……什么都沒有。 我的后端沒有收到任何請求。 我不知道該怎么做。

我的 Info.plist 中有幾行：

<key>WKAppBoundDomains</key>
<array>
    <string>www.my_domain.com</string>
    <string>https://my_domain.com</string>
</array>

TransportSecurity 標志設置為 TRUE：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

我嘗試使用本機提取，但結果是一樣的 - 沒有任何反應。

所以我認為這是 iOS 的問題，但我沒有足夠的知識來理解問題所在。

Answer 1

所以，幾天我試圖意識到我的代碼出了什么問題。 最后我找到了一些日志，上面寫着：

Unhandled Promise Rejection: DataCloneError: The object can not be cloned.

這意味着我嘗試發送的數據有問題。

原因是：

const form_data = this.$store.getters.my_data;

此行返回的不是 json object，而是一些代理 object。 該行為與 json 非常相似：您可以使用 form_data.name 或任何其他值，但 swift 由於某些原因不能使用此 object。

所以，我們只需要創建新的 json object 用於帖子正文：

async submitForm(){
  const form_data = this.$store.getters.my_data;
  const body_data = {};
  for (const [key, val] of Object.entries(form_data)) {
    body_data[key] = val;
  }
  const options = {
    url: 'https://my_domain.com/api/page.php',
    headers: {"Content-Type": "application/json"},
    data: body_data,
  };

  await Http.post(options)
      .then(res => {
        if (res.status === 200) {
          console.log(res.data)
        }
      })
      .catch((err) => {
        console.log(err)
      });

}

這段代碼工作正常

PS確保你在body_data中的所有值都是標准的JS類型

Answer 2

我遇到了同樣的問題：在 Android 和瀏覽器中工作，但在 IOS 上沒有。 VueJS 組合 API 在反應變量上使用了一些 Poxy。

首先將其轉換為 JSON Object - 然后它對我有用。

const bodyJson = JSON.stringify(bodyParameters);

  const options = {
    url: `https://my_domain.com/api/page.php`,
    headers: { "Content-Type": "application/json" },
    data: bodyJson,
  };