POST 请求在 IONIC 应用中的 iOS 设备上不起作用

Question

我试图从 iOS 设备（iOS 模拟器 Xcode ）向我的服务器发送 post-request。我正在使用 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)
      });

}

我没有提交按钮，也没有在方法中使用阻止

当我运行我的项目在网络上进行测试时 - 我没有遇到任何问题。 GET 和 POST 请求工作正常（当测试为 web-app 我必须删除 headers: {"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;

这一行 returns 不是 json 对象而是某个代理对象。该行为与 json 非常相似：您可以使用 form_data.name 或任何其他值，但由于某些原因 swift 不能使用此对象。

因此，我们只需要创建新的 json 对象以在 post 正文中使用：

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

}

这段代码工作正常

P.S。确保 body_data 中的所有值都是标准 JS 类型

Answer 2

我有同样的问题：在 Android 和浏览器中工作，但不在 IOS 中工作。 VueJS 组合 API 在反应变量上使用了一些 Poxy。

首先将其转换为 JSON 对象 - 然后对我有用。

const bodyJson = JSON.stringify(bodyParameters);

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

POST 请求在 IONIC 应用中的 iOS 设备上不起作用

POST request doesn't work on iOS devices in IONIC app

mobile

ios

ionic-framework

vue.js

capacitor