Fetching Data from an API with Headers in React Native

Question

I have an API which needs headers to allow access.

It requires 3 types of header, and without them, in a browser you see

Code: 4101
Message: Header X-Candy-Platform is required

But when you have the headers you get a json. Im trying to get the Json in react Native using this

getPostsFromApiAsync(number) {
    return fetch('http://THEAPI?api_key=APIKEY', {method: 'GET', headers: {
                'x-candy-platform': 'desktop',
                'x-candy-audience': 'domestic',
                accept: 'application/json'
            }})
        .then((response) => response.json())
        .then((responseJson) => {
            var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})
            this.setState({peopleDataSource: ds.cloneWithRows(responseJson)});
        })
        .catch((error) => {
            console.error(error);
        });
}

However this gets me Network request failed.

If I have a file inside 'fetch' which is local, it works fine.

The Three headers required are

x-candy-platform - desktop
x-candy-audience - domestic
Accept - application/json

Any ideas? Thanks

change "accept: 'application/json'" to " 'Accept': 'application/json' " — Jickson, Nov 01 '16 at 19:40
@Jickson im not sure how to get more detailed errors, but I have this. ExceptionsManager.js:82 TypeError: Network request failed at XMLHttpRequest.xhr.onerror (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25196:8) at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:10534:15) at XMLHttpRequest.setReadyState (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:26705:6) at XMLHttpRequest.__didCompleteResponse — drm18272, Nov 01 '16 at 19:46
(http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:26551:6)at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:26645:52 at RCTDeviceEventEmitter.emit (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:9658:23) at MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7541:34) at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7413:7 at guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7351:1) — drm18272, Nov 01 '16 at 19:47
See if this helps http://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed — Jickson, Nov 01 '16 at 19:51
and this too http://stackoverflow.com/questions/38077273/react-native-fetch-network-request-failed-not-using-localhost — Jickson, Nov 01 '16 at 20:06

score 0 · Answer 1 · answered Nov 02 '16 at 01:31

Usually you need a Content-Type header also. Try this and see if it works:

getPostsFromApiAsync(number) {
    return fetch('http://THEAPI?api_key=APIKEY', {method: 'GET',
      headers: {
                'Content-Type'    : 'application/json',
                'Accept'          : 'application/json',
                'x-candy-platform': 'desktop',
                'x-candy-audience': 'domestic'
            }})
        .then((response) => response.json())
        .then((responseJson) => {
            var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})
            this.setState({peopleDataSource: ds.cloneWithRows(responseJson)});
        })
        .catch((error) => {
            console.error(error);
        });
}

Fetching Data from an API with Headers in React Native

1 Answers1