React native – Axios giving "Network error" on iOS-devices (and "Request failed with status code 404")

I’m having a bug on iOS devices. All requests to my API fails with either the error Network Error or Request failed with status code 404. I tried a bunch of things to debug it.

More context

• The app is written in React Native and Expo
• The API is built using Node.JS and TypeScript.
• The API is running on my own little VPS (on an Nginx-server, served on port :8080, so not via HTTPS).
• Axios requests works in an iOS simulator (on my Mac).
• Axios requests are not working (errors being: ‘Network Error’ or ‘Request failed with status code 404’) when I run it on my phone.
• Axios requests are not working when I try my app from the Expo Go-app on my phone.
• I deploy my app using eas build followed by eas submit).

What baffles me, is that I don’t know why or where it fails.

Solution attempt 1: Upgrade Expo SDK

I tried upgrading from version 48 to 49. This gave me all kinds of other issues – and the Axios error persisted. So I downgraded again to version 48 (version 49 had only been out for 3 days).

Solution attempt 2: Check tcpdump on my server

I checked on my server if it’s being hit at all using: sudo tcpdump -i any port 8080. And I didn’t get anything, when I got the Axios errors.

So I could conclude that the error was before it hit the server.

Solution attempt 3: Implement Sentry

I tried installing Sentry, to get a better stack and/or error description. It was a slightly better error, but nothing that helped me.

Solution attempt 4: Add data to headers

I found this github comment amongst others on that page, that suggested adding data: {} and data: null as a header on the get-request.

It didn’t solve it. And I forgot that I left it in, so once I cleaned up my server, then this was preventing it to work.

Solution attempt 5: Look closer at the failing Axios-requests

This is an example:

  let targetEndpoint = 'http://example.org:8080/my-endpoint';
  const config = getConfig(); // getting the headers
  try {
    const response = await axios.get(targetEndpoint, config);
    return response.data.data;
  } catch (error) {
    console.error('Error getting data: ', error); // <-- This is where it makes it
    throw error; 
  }

Example of the stack trace:

{
    "message": "Request failed with status code 404",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 404n    at settle (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:140101:37)n    at onloadend (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:139997:29)n    at call (native)n    at dispatchEvent (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:31686:31)n    at setReadyState (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:30432:29)n    at __didCompleteResponse (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:30234:29)n    at apply (native)n    at anonymous (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:30359:52)n    at apply (native)n    at emit (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:2236:40)n    at apply (native)n    at __callFunction (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:2805:36)n    at anonymous (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:2566:31)n    at __guard (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:2756:15)n    at callFunctionReturnFlushedQueue (http://192.168.0.53:19000/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false:2565:21)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://example.org:8080/my-endpoint"
    },
    "code": "ERR_BAD_REQUEST",
    "status": 404
}

And this:

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Errorn    at handleError (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:173910:39)n    at call (native)n    at dispatchEvent (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:42587:31)n    at setReadyState (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:40560:33)n    at __didCompleteResponse (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:40346:29)n    at apply (native)n    at anonymous (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:40488:52)n    at apply (native)n    at emit (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:3006:40)n    at apply (native)n    at __callFunction (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:3711:36)n    at anonymous (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:3431:31)n    at __guard (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:3648:15)n    at callFunctionReturnFlushedQueue (http://192.168.0.53:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:3430:21)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json",
            "content-type": "application/json"
        },
        "data": "{}",
        "method": "get",
        "url": "http://example.org:8080/my-endpoint"
    },
    "code": "ERR_NETWORK",
    "status": null
}