Question

我是RestAPIs的新手，也是React（原生）的新手。但我设置了一个非常小的Rest API。 Rest API似乎返回完全有效的JSON。我使用网址访问API：http://127。*。***。*：7000 / profile / api / products / 你可以看到我在我的本地主机上。

我尝试使用fetch / axios（同时尝试）发出GET请求：

componentWillMount() {
        axios.get("http://127.0.0.1:7000/profile/api/products/")
        .then(response => this.setState({products: response.data}))
        .catch((error) => console.log(error));
    }

但是我收到网络错误。有人可以帮忙吗我觉得在树林里有点失落，因为我无法确定错误在哪里。

Error: Network Error
    at createError (C:\Users\Computer\Documents\Apps\charlees\node_modules\axios\lib\core\createError.js:16)
    at XMLHttpRequest.handleError (C:\Users\Computer\Documents\Apps\charlees\node_modules\axios\lib\adapters\xhr.js:88)
    at XMLHttpRequest.dispatchEvent (C:\Users\Computer\Documents\Apps\charlees\node_modules\event-target-shim\lib\event-target.js:172)
    at XMLHttpRequest.setReadyState (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:548)
    at XMLHttpRequest.__didCompleteResponse (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:381)
    at C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:487
    at RCTDeviceEventEmitter.emit (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:181)
    at MessageQueue.__callFunction (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:306)
    at C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108
    at MessageQueue.__guard (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:269)

Answer 1

如果这是在模拟器上尝试将机器IP设置为192.168.1.X或类似的东西

Answer 2

为了防止有更多完整的初学者准备在Stackoverflow上让自己难堪，这里的解决方案适合所有将react-native与Django-Rest-Framework结合使用并遇到此错误的人。

首先将本地主机ip（127.xxx）更改为10.0.2.2，因此对API的请求看起来有点像这样。这是因为模拟器。您的本地主机IP指向仿真器本身，但您需要访问本地计算机：

axios.get("http://10.0.2.2:8000/profile/api/products/")
        .then(response => this.setState({products: response.data}))
        .catch((error) => console.log(error));

然后，您需要在Django项目设置中将IP添加到允许的主机。所以你需要添加：

ALLOWED_HOSTS = ['10.0.2.2']

然后你去......

Answer 3

相关讨论： https://github.com/facebook/react-native/issues/10404

确定您的IP：

ifconfig | grep "inet " | grep -Fv 127.0.0.1 | awk '{print $2}'

发出网络请求时，请不要将其发送到localhost。使用您的IP。

示例：

fetch('http://10.0.0.19:8080') .then((response) => response.json())

github用户StephanPartzsch的精彩解释：

问题是，iOS是在模拟器中运行而Android是在在模拟器中运行。 localhost指向环境其中代码正在运行。模拟器模拟真实设备而模拟器只是模仿设备。因此 iOS / Android上的localhost指向模拟的iOS / Android设备。和而不是运行服务器的机器。解决方案是将localhost替换为您机器的IP地址。

向本地RestAPI发出GET请求时出现网络错误

3 个答案: