网络错误-React Native iOS模拟器

Question

我有一个react本机应用程序，它在尝试与后端api通信时抛出Network Error。

我尝试过的故障排除：

• Postman中也有相同的负载(所以问题是模拟器/应用程序，而不是api(
• 使用Axios(通过await axios(config)(
• 尝试使用本地主机(http(和生产服务器(https(作为后端，出现相同错误
• 已启用所有应用程序传输安全设置配置(允许任意加载，添加了异常域(
• 标头中指定了内容类型
• 模拟器已连接到互联网(我尝试了浏览器(

配置：

{"data": null, "headers": {"Content-Type": "application/json", "X-JWT": "..."}, "method": "GET", "url": "https://example.com/..."}

错误：

{"message":"Network Error",
"name":"Error",
"stack":"createError@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:156907:26nhandleError@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:156693:69ndispatchEvent@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:30339:31nsetReadyState@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:29485:33n__didCompleteResponse@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:29291:29nemit@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:2264:42n__callFunction@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:3086:36n@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:2810:31n__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:3037:15ncallFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:2809:21ncallFunctionReturnFlushedQueue@[native code]",
"config":{
"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,
"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json","X-JWT":"..."},
"url":"https://example.com/...",
"method":"get",
"data":"null"
},
"status":null}

技术环境：

• React Native：0.64.1
• 模拟器：iOS 15.2 iPhone 13
• 设备：macOS蒙特利(12.0.1(，苹果M1

Answer 1

我在使用RN0.64.2时遇到了同样的问题

这个问题似乎与Chrome调试器有关。

要修复网络错误，我只需禁用调试器或使用react-native-debugger:

https://github.com/jhen0409/react-native-debugger

如果仍然不起作用，尝试为GET请求设置data: undefined

data: undefined修复程序和其他可能的修复程序的来源：https://github.com/axios/axios/issues/3192

更新：对于较新的RN版本，我使用Flipper：RN 0.66、Flipper App 0.99和Flipper相关性0.99。Flipper应用程序0.149+也可以工作，但在Android网络扩展上有时似乎工作不太好。

我注意到使用了react native中推荐的Flipper版本在我的情况下，我的特定RN版本的升级助手对Android和iOS都最有效。

Answer 2

一个很棒的repo让我们知道API调用列表，其中所有头和数据都传递给API。

查看react本地网络记录器

我们还可以在Axios调用的catch中放入并查看确切的错误消息error.response.message。

希望这将帮助您解决Axios呼叫的问题。

例如

try {
const addReminderRes = await axios({
url: `authentication/addreminder`,
data: formData,
method: 'POST'
})
console.log('addReminderRes : ', addReminderRes)
} catch (err) {
console.log("Error : ", err.response.data)
}