获取API在Postman中工作，但在Axios中不工作

njthzxwz 于 2023-10-18 发布在 iOS

关注(0)|答案(6)|浏览(171)

我正在遵循Udemy的教程，并在这里卡住了：

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

当触发searchApi时，我在控制台中看到此错误

[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

具有相同授权密钥的相同API在Postman中工作。我是不是漏掉了什么？

axios

来源：https://stackoverflow.com/questions/70744842/get-api-working-in-postman-but-not-with-axios

6条答案

按热度按时间

irlmq6kh1#

如果连接不是问题所在，错误就在请求上，也许API试图让你知道错误代码，但你没有捕获它。
像这样执行try/catch：

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

然后检查您的控制台。

赞(0）回复(0）举报 2023-10-18

xsuvu9jc2#

您需要使用try catch块捕获错误。如果您没有收到任何错误，那么您也可以在Web浏览器的开发人员面板中检查网络XHR调用。在开发人员面板中，您可以确切地看到API调用URL，头部和主体，以及您可以看到从API接收的响应。
Chrome浏览器-> https://developer.chrome.com/docs/devtools/open/
Firefox -> https://developer.mozilla.org/en-US/docs/Tools/Web_Console
如果你需要进一步的帮助，请随时从网络面板发布屏幕截图或将代码推送到github以进一步调试。

赞(0）回复(0）举报 2023-10-18

gpnt7bae3#

这可能是一个CORS错误。参见Calling Yelp API from frontend JavaScript code running in a browser
该代码不能从具有CORS保护的浏览器运行。如果你必须这样做，你可以尝试使用第三方浏览器扩展或其他方式禁用CORS。（风险自担！）

赞(0）回复(0）举报 2023-10-18

hl0ma9xz4#

@housefly
我认为 Postman GET请求和axios请求之间的区别在于隐藏的头。Postman有内部逻辑来附加请求类型和标题，即使你没有提到。如果您使用Axios手动查询没有足够的标题。请在您的axios API调用中尝试以下标题。