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

IT技术 ios reactjs ionic-framework capacitor
2021-05-11 06:46:31

我正在使用 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));
                }
            }
        );
});
2个回答

最后,经过几天的尝试解决这个问题,我找到了解决方案在这里,对于每个为此苦苦挣扎的人:

当您尝试执行 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"从按钮中删除该属性

另一个让我找到这个解决方案的答案

我在这个问题上花了几天时间。结果:javascript 调用在离子和电容器中存在 CORS 问题,因此您需要运行本机调用,尤其是在 IOS 中才能工作。

可以在此处找到完整的博客文章:https : //enappd.com/blog/how-to-make-api-calls-in-ionic-capacitor-apps/179/#66d6

它终于为我解决了这个问题。