Get api working in Postman but not with Axios

Question

I am following a tutorial from Udemy and got stuck here:

Yelp.js

import axios from "axios";

export default axios.create({
    baseURL : 'https://api.yelp.com/v3/businesses',
    headers : {
        Authorization : 
        'Bearer ****************'
    }
})

SearchScreen.js

const SearchScreen = () => {

    const [term, setTerm] = useState('');
    const [results, setResults] = useState([]);

    const searchApi = async () => {
        const response = await yelp.get('', {
            params : {
                term : term,
                location: 'san jose'
            }
        });
        setResults(response.data);
    }

    return (
        <View style={styles.backgroundStyle}>
            <SearchBar 
                term = {term} 
                onTermChange = {setTerm}
                onTermSubmit = {searchApi} />

            <Text>We have found {results.length} results</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    backgroundStyle : {
        backgroundColor : '#FFFFFF',
        flex: 1
    }
})

export default SearchScreen

When searchApi is triggered I see this error in the console

[Unhandled promise rejection: Error: Network Error]
at node_modules/axios/lib/core/createError.js:15:17 in createError
at node_modules/axios/lib/adapters/xhr.js:114:22 in handleError
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:609:10 in setReadyState
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:396:6 in __didCompleteResponse
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit

The same Api with the same Authorization key is working in Postman. Am I missing something here?

https://stackoverflow.com/questions/70547373/cant-send-http-requests-to-localhost-backend-from-react-native-mobile-app Please try this — Dinindu Kanchana, Jan 20 '22 at 04:58
you can try with the `try{} catch(error){}` block in your `searchApi()` OR add `timeout: 25000` in your `axios.create`. hope it'll helps you. — Kishan Gujarati, Jan 24 '22 at 11:14
Should `await yelp.get('')` really be empty? Try putting the whole URL in there, even if it isn't "necessary". Like '127.0.0.1' or 'localhost' — Fusseldieb, Jan 26 '22 at 17:24

score 2 · Answer 1 · edited Jan 27 '22 at 03:39

If the connection is not the issue, the error is on the request and maybe the API is trying to let you know the error code but you aren't capturing it.

Implement a try/catch like this:

try {
  const response = await yelp.get('', {
    params : {
        term : term,
        location: 'san jose'
    }
  });
  setResults(response.data); 
} catch (ex) {
  if (ex && ex !== undefined && ex.toString && ex.toString !== undefined) {
    // print the general exception
    console.log(ex.toString());
  }     
  if (
    ex.response &&
    ex.response !== undefined &&
    ex.response.data &&
    ex.response.data !== undefined
  ) {
    // print the exception message from axios response
    console.log(ex.response.data);
  }
}

Then check your console.

Suneet Jain · Answer 2 · 2022-01-26T16:28:20.033

You need to catch the error using try catch block. If you are not getting any error then you can also check the network XHR calls in developer panel of your web browser. In the developer panel you can exactly see the API call url, headers and body as well you can see the response received from the API.

Chrome Browser -> https://developer.chrome.com/docs/devtools/open/

Firefox -> https://developer.mozilla.org/en-US/docs/Tools/Web_Console

If you need further help then feel free to post the screenshot from your network panel or push your code to github to debug further.

score 1 · Answer 3 · answered Jan 26 '22 at 22:51

1

It's likely a CORS error. See Calling Yelp API from frontend JavaScript code running in a browser

That code cannot be ran from a browser, which has CORS protection. If you have to, you can try to disable CORS using a third party browser extension or otherwise. (At your own risk!)

answered Jan 26 '22 at 22:51

Code

6,041
4
35
75

This answer led me to this post https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome?answertab=trending#tab-top that was the solution for me! Thank you! – Marisol Gutiérrez Sep 12 '22 at 20:39

score 1 · Answer 4 · answered Jan 27 '22 at 04:37

@housefly

I think the difference between a postman GET request and your axios request is due to the hidden headers. Postman has internal logic to append the request type and below headers even if your didn't mention. Where as your manual query using Axios is not having sufficient header. Could you please try the below headers in your axios API call.

score 0 · Answer 5 · answered Jan 27 '22 at 04:09

0

check the XHR request in the network tab by the active developer tool. If you are getting errors in your API. If you are getting the response correct then debug your code by catching the exception.

answered Jan 27 '22 at 04:09

Yogesh Chauhan

151
2
5

Get api working in Postman but not with Axios

5 Answers5