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

njthzxwz  于 2023-10-18  发布在  iOS
关注(0)|答案(6)|浏览(170)

我正在遵循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中工作。我是不是漏掉了什么?

irlmq6kh

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

然后检查您的控制台。

xsuvu9jc

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以进一步调试。

gpnt7bae

gpnt7bae3#

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

hl0ma9xz

hl0ma9xz4#

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

lmyy7pcs

lmyy7pcs5#

通过活动的开发人员工具检查网络选项卡中的XHR请求。如果您的API中出现错误。如果你得到的响应是正确的,那么通过捕获异常来调试你的代码。

laik7k3q

laik7k3q6#

你可能会错过其中一个标题

  1. cookie
    1.服务器期望的一些自定义头
    1.起源
  2. user-agent可能是出于安全目的添加的

相关问题