axios 的网络错误和本机反应

Posted 2023-03-28

【中文标题】axios 的网络错误和本机反应

【英文标题】：Network error with axios and react native

【发布时间】：2018-08-28 11:20:18

【问题描述】：

我使用我在外部托管的 Django python 框架创建了一个 API 端点。我可以从浏览器 (mydomain.com/endpoint/) 访问我的端点并验证没有错误。当我在我的开发机器 (localhost:8000/endpoint/) 上本地运行我的测试 django 服务器时也是如此。当我使用本地主机作为端点时，我的 json 数据可以毫无问题地通过。当我使用我的生产域时，axios 遇到了网络错误，并且它提供的上下文并不多......从调试控制台我得到了这个：

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:554)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:387)
    at XMLHttpRequest.js:493
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:353)
    at MessageQueue.js:118
    at MessageQueue.__guardSafe (MessageQueue.js:316)

这是我在 react native 组件中的 axios 调用：

    componentDidMount() 
        axios.get('mydomain.com/get/').then(response =>   // localhost:8000/get works
            this.setState(foo:response.data);
        ).catch(error => 
            console.log(error);
        );
    

【问题讨论】：

您可能需要某种记录器来查看请求和响应，以确保实际的网络错误是什么

这是发生在 iOS、android 还是两者上？

@SeanWang 你有什么想法吗？我不确定你的意思。

@ajthyng iOS，安卓没试过。

Axios (in React-native) not calling server in localhost的可能重复

【参考方案1】：

如果您尝试在使用 AVD 创建的 android 模拟器上调用 localhost，将 localhost 替换为 10.0.2.2 为我解决了这个问题。

【讨论】：

有效！例如“http://localhost:8000/”变成“http://10.0.2.2:8000/”

【参考方案2】：

iOS 中似乎默认阻止未加密的网络请求，即https 可以工作，http 不会。

From the docs:

默认情况下，iOS 将阻止任何未使用 SSL 加密的请求。 如果您需要从明文 URL（以 http 开头）获取 您首先需要添加一个应用传输安全例外。

【讨论】：

这可是救命稻草！

是的完美答案！

另外，如果您要连接到远程主机，请确保您的 SSL 中间证书已正确建立。使用digicert.com/help 进行检查。

我有 https，但它不起作用你知道另一种方法吗？

【参考方案3】：

从 localhost 更改为您的 ip(192.168.43.49)

添加 http://

http://192.168.43.49:3000/user/

【参考方案4】：

如果您在其他帖子中没有找到答案

在我的例子中，我使用 Rails 作为后端，我尝试使用 Axios 向 http://localhost:3000 发出请求，但每次我收到 Network Error 作为响应。然后我发现在android模拟器的情况下我需要向http://10.0.2.2:3000发出请求。对于 iOS 模拟器，它适用于 http://localhost:3000。

结论

使用

http://10.0.2.2:3000

而不是

http://localhost:3000

【讨论】：

localhost:3000 IOS 不行，然后我把 http 改成 https 还是不行

@MEAbid 确保 ip 和端口正确。另外，检查防火墙设置。

【参考方案5】：

对我来说，问题是因为我的远程 URL 不正确。 如果您的 URL 是 .env 文件，请交叉检查命名并确保 它以 REACT_APP_ 为前缀，因为如果以其他方式命名，react 可能无法找到它。

在 .env 文件中类似于 REACT_APP_BACKEND_API_URL=https://appurl/api 可以访问为 const REACT_APP_BACKEND_API_URL = process.env;

【参考方案6】：

试试 “内容类型”：“应用程序/x-www-form-urlencoded”， 接受：“应用程序/json”

【参考方案7】：

我遇到了同样的问题。

我看得更深，我的

端点url 不正确。

通过提供axios 正确的网址，我的 api 就像魅力一样工作。

希望对大家有所帮助

【讨论】：

Shezada lagaya tu

【参考方案8】：

确保将localhost 更改为your_ip_address，您可以通过在命令提示符中输入ipconfig 来找到它

尝试添加到您的AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

【参考方案9】：

如果您使用的是 android，请打开命令提示符并输入 ipcofig。然后获取你的IP地址并用localhost替换它。

在我的例子中，我首先使用了 http://localhost:8080/api/admin/1。然后我把它改成了http://192.168.1.10:8080/api/admin/1。它对我有用。