I’m using Ionic (v5) + React + Capacitor to create an app for iOS and I recently got stuck with a really strange error: fetch() and axios successfully perform GET requests to the backend while POST requests are always failing.
fetch() returns "cancelled"
which tells me nothing but a failure meanwhile axios generates a more descriptive error:
{
"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
}
}
Already checked Apache’s CORS settings, it should be OK. Could anyone suggest a fix for this?
Part of my code that performs all api requests
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));
}
}
);
});
Originally posted on SO by me