iOS 上的电容器：POST 请求失败

我正在使用 Ionic (v5) + React + Capacitor 创建一个 iOS 应用程序，最近遇到了一个非常奇怪的错误： fetch() 和 axios 成功地向后端执行 GET 请求，而 POST 请求总是失败。

fetch() 返回"cancelled"这只告诉我失败，同时 axios 生成更具描述性的错误：

{
  "message": "Network Error",
  "name": "Error",
  "stack": "capacitor://localhost/static/js/8.98344607.chunk.js:2:168604\ncapacitor://localhost/static/js/8.98344607.chunk.js:2:167548",
  "config": {
    "url": "auth",
    "method": "post",
    "data": "{\"email\":\"email-here\",\"password\":\"111111\"}",
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    "baseURL": "https://website.com/api/1.3/",
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1
  }
}

已经检查了Apache的CORS设置，应该没问题。有人能建议解决这个问题吗？

Upd.1：我的代码的一部分，执行所有 api 请求

const axConf: AxiosRequestConfig = {
    url: query, // string
    method: m, // string
    baseURL: global.base_uri + 'api/' + global.api_version + '/',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    },
    data: r, // object
    validateStatus: function (status) { return status >= 200 && status < 300; }
};
return new Promise(resolve => {
    axios(axConf)
        .then(response => resolve(successRes(r, i, response.data)))
        .catch(function (error) {
                console.log(error);
                if (error.response) {
                    resolve(errorRes(i, error.response));
                } else if (error.request) {
                    resolve(errorRes(i, error.request));
                } else {
                    resolve(errorRes(i, error.message));
                }
            }
        );
});

终于，经过几天的尝试解决这个问题我找到了解决方案。 对于每个为此苦苦挣扎的人来说，这就是：

当您尝试执行 HTTP 请求，然后代码中的某些内容破坏了该请求时，就会发生此错误。 就我而言，形式如下：我的 fetch() 请求已由按钮的 onClick 操作触发type="submit"设置它并提交表单本身只会触发取消我的请求的状态更新。

我正在将我的应用程序从 Ionic v4 和 Angular 切换到 Ionic v5 和 React，之前的表单不会导致这种行为，这就是为什么我什至不认为这可能是一件事。

我刚刚从按钮中删除了 onClick 操作并设置onSubmit={handleLogin}到表格本身。然后修改代码如下：

const handleLogin = (e: FormEvent) => {
    fnGetUserToken(loginData).then(...);
    e.preventDefault();
};

请注意e.preventDefault();在最后。

如果您无法像这样更改代码，我想您可以尝试删除该属性type="submit"从你的按钮。

另一个答案 https://stackoverflow.com/a/56134764/3909488这导致我找到了这个解决方案。