ReactRedux Fetch Network Request Failed

Question

I'm trying to fetch from localhost:

export function fetchUsersFromAPI() {
    return(dispatch) => {
        dispatch(getUsers())
         fetch('https://localhost:3000/users')
      // fetch('https://192.168.0.2:3000/users/')  //< same error for this too
        .then(res => res.json())
        .then(json => dispatch(getUsersSuccess(json.results)))
        .catch(err => dispatch(getUsersFailure(err)))
    }
}

Accessing https://192.168.0.2:3000/users or https://localhost:3000/users from browser returns :

[{"id":1,"name":"Name1","color":"Green"},{"id":2,"name":"Name2","color":"Red"},{"id":3,"name":"Name3","color":"Yellow"}]

So its already in json. Is it mandatory to use https and not http in Redux fetch?

I passed the err to my reducer so I get :

"TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:15946:16)
    at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:18719:35)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:18502:18)
    at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:18358:14)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:18453:45
    at RCTDeviceEventEmitter.emit (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:9351:35)
    at MessageQueue.__callFunction (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:8235:42)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:8051:15
    at MessageQueue.__guard (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:8206:9)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:8050:13)"

What am I doing wrong? If I use fetch('https://swapi.co/api/people/') it works. Please help.

What is running on `3000`? do you have a proxy or is that another server? — Nick Brady, Sep 14 '17 at 23:35
It's my localhost. Node sever. I used OpenSSL to create the certs. — Somename, Sep 15 '17 at 00:05
try catching the error with `fetch('https://localhost:3000/users').catch(e => console.log(e))` — James Gentes, Sep 15 '17 at 00:12
try using 10.0.2.2:3000 instead of localhost:3000 for android — Ankit Aggarwal, Sep 15 '17 at 05:29
ok. can you also check android's manifest file whether internet permission is there or not? I am assuming that you are running it on Android — Ankit Aggarwal, Sep 15 '17 at 07:15
Thanks. Yes, Android Emulator. If I change to `fetch('https://swapi.co/api/people/')`, it works. Problem on localhost. — Somename, Sep 15 '17 at 07:42
Also, this line is present in the manifest file : `` in `\my03\android\app\src\main` — Somename, Sep 15 '17 at 07:45
I think its would be helpful advice https://stackoverflow.com/a/43277765/8613805 — Andrii Skrebets, Sep 15 '17 at 20:08

ReactRedux Fetch Network Request Failed

0 Answers0