Network error when axios call has parameters on IOS

Ionic Framework Ionic Vue
1

I’m using axios for all my api calls on my Ionic App with Vue. When I build my app on Xcode I got the error “Network error”.

{"message":"Network Error","name":"Error","stack":"capacitor://localhost/js/chunk-vendors.48c94d63.js:3:19640\ncapacitor://localhost/js/chunk-vendors.48c94d63.js:24:8990","config":{"url":"URL","method":"post","data":"{\"page\":1}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1}}

I saw that this error occurs only when I have parameters

axios.post("API CALL", {
          page: this.page,
        })
        .then((response) => {
            // console.log(response.data);
            this.events = response.data;
            this.loaded = true;
        })
        .catch(async (err) => {
          console.log(err);
        });

When removing parameters, no errors. Server side, the CORS settings are OK.

I don’t know where to debug this problem

2
  1. Are you testing on an iOS beta release?
  2. Are you making a request to an HTTPS endpoint?
3

Hi,

No I’m on macOS Big Sur 11.4 and Xcode 12.5.1

And yes all my endpoints are on https. All is ok when no parameters…

4

Shot in the dark, but could you do the same request with built-in fetch?

fetch(API_ENDPOINT, {
  method: 'POST',
  headers: new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }),
  body: JSON.stringify({page: this.page})
})
.then((response) => response.json())
.then((res) => {
  console.log(res
})
.catch((error) => {
  console.error(error);
});
1 Like
5

I didn’t think of using fetch, It’s the same problem but fetch returns a better error information !
The error was that capacitor://localhost was not allowed by origin.

I was able to realize that my CORS configuration was not good

Thanks to you @mhartington

3 Likes
6

Glad you got it worked out!

7

Hi!
Can i know how to resolve this issue?
i got a similar issue…

1 Like
8

Please can you elaborate on your solution??

thank you

9

I am trying similar on IOS 16, xcode 13.

      let x = encode(user_and_password)
        console.log("encoded")
        try {
          let response = await fetch(url ,  // https url 
             {
              method: 'GET',
              headers: {
                'Authorization': 'Basic ' + x,
                "Content-Type": "application/json",
              }
            }
          )
          console.log("back from fetch , status=" + response.status)
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +
              response.status);
            return;
          }
          console.log("back from fetch , read data=" + response.status)
          // Examine the text in the response
          response.json().then(function (data) {
            console.log(data);
            this.$router.push({ name: "Select", params: { gender: this.config.gender, devices: data } })
          });
        } catch (error) {
          console.log("error="+JSON.stringify(error))
        }

I see in the xcode log

⚡️  [log] - encoded
⚡️  [log] - error={}

ionic 6 Vue.

doing the get with curl on the mac system works ok.
connecting to the base url on the phone via safari works ok. (phone only wifi connected)
local network in info.plist, but don’t get prompt.

10

fetch didn’t work, but capacitor http does…