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

【问题标题】：POST request doesn't work on iOS devices in IONIC appPOST 请求在 IONIC 应用程序中的 iOS 设备上不起作用
【发布时间】：2022-01-14 22:36:03
【问题描述】：

我尝试从 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

当我在网络上运行我的项目进行测试时 - 我没有任何问题。 GET 和 POST 请求工作正常（当作为网络应用程序进行测试时，我必须删除标题：{"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 的问题，但我没有足够的知识来理解问题是什么。

【问题讨论】：

您的网址选项中只有一个/？
@Super_Simon，感谢您的注意，但这只是我的错误。写这篇文章的时候不小心删了一个斜线。其实地址没问题。 Android 设备使用相同的 url 并且可以正常工作。

标签： ios vue.js ionic-framework mobile capacitor

【解决方案1】：

我有同样的问题：在 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,
  };

【讨论】：

【解决方案2】：

所以，几天后我试图意识到我的代码出了什么问题。最后我找到了一些日志，上面写着：

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

这意味着我尝试发送的数据有问题。

原因是：

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

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

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

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

}

这段代码运行良好

附：确保 body_data 中的所有值都是标准 JS 类型

【讨论】：