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

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

Collectives™ on Stack Overflow

Fetching Data from an API with Headers in React Native

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest