CODEWITHSUNDEEP
node.jsreact-nativenginxaxiosexpo
Zeth
Zeth

Reputation: 2618

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

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 404\n    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 Error\n    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
}

Upvotes: 1

Views: 4882

Answers (5)

Umair Sarfraz
Umair Sarfraz

Reputation: 6079

Try the following:

Allow HTTP for Development: iOS blocks HTTP requests by default. To allow HTTP, add the following to your Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Ensure your API is reachable from your mobile device. Open the API URL directly in your phone's browser (e.g., http://example.org:8080/my-endpoint). If it doesn't load or returns an error, the issue may be with your server configuration or network setup, not axios.

Lastly, make sure the server is configured to accept external requests. Check that your server (e.g., Nginx or Apache) is properly configured to allow connections from external devices.

Upvotes: 0

ahammani
ahammani

Reputation: 93

The API is running on my own little VPS (on an Nginx-server, served on port :8080, so not via HTTPS).

I think that's the problem. iOS doesn't allow HTTP calls by default. The best thing is to use HTTPS. If you really don't want to, there is an option to enable http. See this link:

https://developer.apple.com/documentation/bundleresources/information-property-list/nsexceptionallowsinsecurehttploads

but note that you will have difficulty uploading to the app store:

You must supply a justification during App Store review ...

I Hope this helps.

Upvotes: 0

Giorgos Philippou
Giorgos Philippou

Reputation: 66

I had a similar problem when I created a function that set up the configurations for the Axios request and the GET requests were rejected on iOS with an error message:

Axios Error: Network Error

I figured out that the problem was caused because I was passing an empty object to the body of the request and to resolve it I am passing undefined instead.

Upvotes: 0

Raul Ernesto Flores Ramirez
Raul Ernesto Flores Ramirez

Reputation: 21

Try this, i had the same problem on android, after two weeks i finally fixed

https://github.com/axios/axios/issues/4406#issuecomment-1058701729

Upvotes: 0

Zeth
Zeth

Reputation: 2618

I'm not entirely sure, but I'm guessing that it was because iOS-devices has some security thing, preventing it to call http-URL's.

When I cleaned up my Node.JS-server setup, so it called it via https and didn't call port 8080, but just regularly without any port, then it started working.

It did mean that I had to remove my nginx-setup on the server, and setup apache as a reverse proxy instead.

Upvotes: 0

Related Questions