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
– Jickson, Commented Nov 1, 2016 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 (localhost:8081/…) at XMLHttpRequest.dispatchEvent (localhost:8081/…) at XMLHttpRequest.setReadyState (localhost:8081/…) at XMLHttpRequest.__didCompleteResponse — drm18272
– drm18272, Commented Nov 1, 2016 at 19:46
(localhost:8081/… localhost:8081/… at RCTDeviceEventEmitter.emit (localhost:8081/…) at MessageQueue.__callFunction (localhost:8081/…) at localhost:8081/… at guard (localhost:8081/…) — drm18272
– drm18272, Commented Nov 1, 2016 at 19:47

Brien Crean · Accepted Answer · 2016-11-02 01:31:59Z

0

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);
        });
}

answered Nov 2, 2016 at 1:31

Brien Crean

2,6985 gold badges26 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetching Data from an API with Headers in React Native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related