Axios: Axios 不适用于 Android（模拟器）引发网络错误

创建于 2017-06-25 · 58评论 · 资料来源: axios/axios

我是 React Native 的新手，我正在玩组件和 http ajax 请求，并且在 iOs 模拟器上一切正常，直到我想在 Android 模拟器上进行测试。

这是我的 Http 类：

import 'url-search-params-polyfill';
import axios from 'axios';
import { AsyncStorage } from 'react-native';
import Rx from 'rxjs/Rx';

let _HttpServiceInstance = null;

class HttpService {

  constructor(envStr) {
    console.log('DEFAULT', axios.defaults);
    if(!_HttpServiceInstance){
      this.__proto__.ghtnk = null;
      axios.defaults.baseURL = this.getBaseUrlApi()[envStr || 'DEV'];
      axios.interceptors.response.use(
        (resp) => {
          let ghresp = resp.data || resp;
          ghresp.status = resp.data ? resp.data.status : resp.status;
          return ghresp;
        },
        (err) => {
          if( err.status === 401 ){
              this.removeToken();
              // go to login
          }
          return Promise.reject(err);
        }
      )
      _HttpServiceInstance = this;
    }
    return _HttpServiceInstance;
  }

  getBaseUrlApi = () => {
    return {
      DEV : 'https://dev-api.domainname.com/',
      TEST: 'https://test-api.domainname.com/',
      QA  : 'https://qa-api.domainname.com/',
      LIVE: 'https://api.domainname.com/',
    };
  }

  switchBaseUrlApi(envStr) {
    axios.defaults.baseURL = this.getBaseUrlApi()[envStr];
  }

  getToken = (callback) => {
      let promise = AsyncStorage.getItem('ghtkn');
      if( callback ){
        promise.then(callback, () => { console.log('getToken: ', err) });
      }
      else return promise;
  };

  setToken = (token) => {
    return AsyncStorage.setItem('ghtkn', token);
  };

  removeToken = () => {
    AsyncStorage.removeItem('ghtkn');
  };

  setAuthHeaders = (callback, noNeedToken) => {
    if ( noNeedToken ) {
      callback(); return;
    }
    this.getToken(
      (token) => {
        if (token) {
          axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
          callback();
        }
        else{ console.log('NO TOKEN PRESENT'); }
      },
      (err) => { console.log('GET TOKEN: ', err); },
    );
  };

  // GET
  get = (url) => {
    let subject = new Rx.Subject();
    this.setAuthHeaders((token) => {
      axios.get(url).then(
        (data) => { subject.next(data); },
        (err) => { console.log('GET: ', err); }
      );
    });
    return subject;
  };

  // POST
  post = (url, payload, noNeedToken) => {
    let subject = new Rx.Subject();
    this.setAuthHeaders(() => {
      axios.post( url, this.setParams(payload)).then(
        (resp) => { subject.next(resp); },
        (err) => {
          console.log('POST ERROR');
          console.log(err.request, Object.keys(err) );
          subject.error(err);
        }
      );
    }, noNeedToken);
    return subject;
  };

  // PUT
  put = (url, payload) => {
    let subject = new Rx.Subject();
    this.setAuthHeaders((token) => {
      axios.put( url, this.setParams(payload)).then(
        (resp) => { subject.next(resp); },
        (err) => { console.log('PUT: ', err); }
      );
    });
    return subject;
  };

  // LOGIN
  login = (user, pw) => {
    return this.post('user/authentication', {username: user, password: pw}, true)
               .do((resp) => { this.setToken(resp.token); })
  };

  setParams = (jsonParams) => {
    let params = new URLSearchParams();
    for(param in jsonParams){
      if( jsonParams.hasOwnProperty(param) ){
        params.append(param, jsonParams[param]);
      }
    }
    return params;
  };

}

export { HttpService };

这是我从发布请求中得到的错误，使用我使用axios.post()创建的login()函数

screen shot 2017-06-24 at 22 32 54

笔记：

我正在使用最新版本的 Axios ^0.16.2
我的 AndroidManifest.xml 包含：

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

这些 API 在 VPN 下，因为我写的一切都适用于 iOs 模拟器，但不适用于 Android 模拟器。

资料来源

Donovantxy

👍30 ❤2

最有用的评论

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

VitaliiK91 于 2018-11-09

👍58 ❤24 🎉16 😄10 👎7 👀5 🚀4

所有58条评论

我在 React Native 中使用 Android 时也遇到了这个错误。它适用于 iOS。

brentmitchell25 于 2017-07-11

我在 React Native 中也遇到了 Android 的这个错误。

farhaan 于 2017-07-11

安卓真的不支持axios吗？ 😨

simplenotezy 于 2017-07-27

😕2 😄1

同样的问题，有人解决吗？

rogerluo410 于 2017-08-04

可以在 iOS 中使用，但在 Android 中无法使用。 Android 不支持 HTTPS。

milon87 于 2017-09-16

👍16 👀6 😄1

标记

zhe-he 于 2017-09-19

任何人都可以帮助https://stackoverflow.com/questions/46307932/network-error-in-axios-post-request-react-native吗？

hashemirafsan 于 2017-09-19

不同条件下的相同问题。

Axios 抛出网络错误，但仅限于 iOS 模拟器。

在 android 上运行良好（在实际设备上测试）。使用带有http而不是https的 AWS 服务器。

请帮忙

hzburki 于 2017-10-25

👍1

GET 无法使用body 。
我认为你应该在使用 GET 时删除你的data 。

axios.interceptors.request.use((config) => {
  if (config.method !== 'get') {
    config.data = qs.stringify(config.data) // fix Rails i18n error
  }
  if (typeof config.params === 'undefined') {
    config.params = {}
  }
  return AppSettingService.getAppSetting()
    .then((appSetting) => {
      config.params.locale = appSetting.locale
      config.params.currency = appSetting.currency
      return ProfileService.getCurrentUser()
        .then((currentUser) => {
          if (currentUser) {
            config.headers.common.Authorization = currentUser.token
          }
          return config
        })
    })
})

我有类似的问题，但我在使用 GET 时通过省略data修复了此网络错误。

miriyas 于 2017-12-20

@hzburki我遇到了和你一样的问题，但我发现，在 android 模拟器上，网络请求的超时似乎是 2 或 3 分钟。但是，设置 Axios 的默认超时在 android 模拟器上不起作用。

hpb0412 于 2018-01-17

嘿@hpb0412 ...我很抱歉我发布这个已经有一段时间了，所以我不记得我是如何解决这个问题的。但是现在看来，我当时似乎没有为 iPhone 启用 App Transport Security，因为它在 Android 上运行良好。但这对你没有帮助。

这将有助于查看您发送 GET 请求的后端的错误日志，并使用 Postman 尝试相同的请求，以确保后端代码没有任何问题。

hzburki 于 2018-01-17

这似乎是我在特定于 Android 7.0 的 React Native 上遇到的“获取问题”。
原因是使用自签名证书

Winglonelion 于 2018-05-05

👍1

我通过一个简单的 Get 请求得到了相同的网络错误

`var 实例 = axios.create({
baseURL：getEnvVars.apiHost，
超时：5000，
标头：{'x-api-key'：getEnvVars.apiKey}
});

    return instance.get('/products?brand=' + params.brand)
        .then((response) => {
            console.log(response.data);
        })
        .catch((error) => {
            console.log(error);
        });`

`▼网络错误

node_modules/axios/lib/core/createError.js:16:24 in createError
node_modules/axios/lib/adapters/xhr.js:87:25 in handleError
node_modules/raven-js/src/raven.js:377:26 包装
dispatchEvent 中的 node_modules/event-target-shim/lib/event-target.js:172:43
setReadyState 中的 node_modules/react-native/Libraries/Network/XMLHttpRequest.js:567:29
__didCompleteResponse 中的 node_modules/react-native/Libraries/Network/XMLHttpRequest.js:397:25
node_modules/react-native/Libraries/Network/XMLHttpRequest.js:503:16 in
node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:180:12 在发出
__callFunction 中的 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:351:47
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:116:26 in
__guardSafe 中的 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:6
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:115:17 in callFunctionReturnFlushedQueue`

PaddyLock 于 2018-06-06

我遇到了类似的问题并找到了解决方案。我的问题与我的域有关。
我发现域 __ 中不能有_ __。例如， https://my_api.mydomain.com将不起作用。但是， https://my-api.mydomain.com或https://api.mydomain.com将起作用。 ~请注意，我的 SSL 证书来自 CloudFlare，所以这也可能是 SSL 证书问题。~

编辑：根据http://ssllabs.com ，两个证书是相同的，应该适用于所有最新的 Android 版本。

alexandcote 于 2018-06-27

❤1 👍1

请帮忙解决，还是不行，我也遇到了同样的问题

hsunami10 于 2018-09-18

@hsunami10你的域名是什么？你的应用程序有回购吗？

alexandcote 于 2018-09-18

@hsunami10我通过设置外部登台服务器并指向该服务器以使用模拟器进行测试来解决此问题。

PaddyLock 于 2018-09-19

伙计们，我也在这个问题上为退出而苦苦挣扎。但我现在在 Android 设备上发现了我的 axios post network createError 的问题。 axios 网络错误的原因是因为我传递给 axios 的表单数据包含我猜的错误类型的数据对象。我已经包含了一个图像对象（来自 Expo 的 ImagePicker 对象）作为我认为 axios 不接受的表单数据的参数之一。 Axios 可能只接收 string、float、int 或 image 作为参数。图像不能作为参数传递，它不是一种图像，它是一个反应原生对象，我已经删除它并通过将 image.uri 分配给参数的值来包含一个图像字段作为参数，然后它就可以工作了。希望这会帮助一些可能遇到与我之前遇到的相同问题的人。
在测试 axios 网络错误的时候，把你的一些表单数据一一删除，你会发现问题的原因是哪一个。

ghost 于 2018-10-09

❤2 🎉2 👍2

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

VitaliiK91 于 2018-11-09

👍58 ❤24 🎉16 😄10 👎7 👀5 🚀4

对于案例上传媒体流程，我建议大家改用rn-fetch-blob 。

Winglonelion 于 2018-11-09

@VitaliiK91你的意思是 Genymotion 中的 ADB 设置。要替换的本地主机设置在哪里？

PaddyLock 于 2018-11-11

我对托管在 heroku 中的 Rest API 的简单 GET 请求遇到了同样的问题。在 IOS 模拟器上，同样的请求运行良好。

axios.get('https://my-app-api.herokuapp.com/api') .then(response => { this.setState({ bets: response.data }) });

daibertdiego 于 2018-11-15

我也尝试使用标题，但也没有工作。

axios.get('https://my-app-api.herokuapp.com/api', { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json; charset=UTF-8', }, }) .then(response => { this.setState({ bets: response.data }) });

daibertdiego 于 2018-11-15

我也有同样的问题。这仅与Android 7.0有关，对于其他Android版本，它运行良好。
问题是 Axios https发布请求甚至没有到达服务器。仅由于 SSL 握手失败，它因网络错误而失败。
它适用于所有 iOS 版本以及除 Android 7.0 之外的所有 Android 版本。
看起来 Android 7.0 在 okhttp 中有一些严重的问题。

mahesh-vidhate 于 2018-11-29

👍1

我也有同样的问题。我使用的是最新版本的 Android，我尝试将简单的文本发送到我的服务器，但仍然收到网络错误。获取请求也是如此

helloitsm3 于 2018-12-02

👍1

我终于设法解决了这个问题。使用我的网络 IP 地址，它可以工作。例如 http://：/api

更多在这里

helloitsm3 于 2018-12-03

👍2

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

抓到他们了

RyuK-H 于 2018-12-04

🎉2

这对我有用。我正在使用 MAC
https://stackoverflow.com/a/53617769/5708097

rollrodrig 于 2018-12-04

👎1

类似的问题在这里，一切都可以在iOS上找到，android就是不能工作！
我比较了iOS和android之间的所有请求配置，完全一样！
android 总是向我返回一个登录页面，即使我已经硬编码了 cookie 标头。

shuangyu 于 2019-01-02

这里同样的问题。我已经在使用10.0.02 ，并且我的实际通话发生了（它发送了一封电子邮件），但响应了一个错误（？？）。

.post(`/sendMail`, null, {
      params: {
        mail,
      },
    })
    .then(response => response) // No output
    .catch(error => {
      console.log(error); // ERROR : Network Error
      return error.response; // undefined
    });

搜索后，这个问题似乎只有在我更新数据库中的表时才会发生。最奇怪的是，我的更新实际上是按程序进行的。只是……没有回应。

GuillaumeRZ 于 2019-01-03

👍2

（重复发帖，抱歉）

我只是打开了一个 StackOverFlow 主题，我试图更准确地说，它是： https ://stackoverflow.com/questions/54108848/network-error-with-axios-and-android-emulator

GuillaumeRZ 于 2019-01-13

👍1

尝试https://stackoverflow.com/questions/51902629/how-to-allow-all-network-connection-types-http-and-https-in-android-9-pie

a7urag 于 2019-01-31

当我遇到完全相同的症状时，我遇到了这个问题。所以这可能对某人有用。我是使用 Android 模拟器的新手，所以我很惊讶这个适用于 iOS 的请求会在 Android 的模拟器上失败。事实证明，我的服务器（不是自签名的 https）存在问题，需要重新安装，因此 SSL 握手不正确，这意味着我也收到了在本文开头发布的相同网络错误。

我建议 100% 确认证书已正确安装，例如从 sslshopper 获取报告 - 希望这可以帮助某人👍

accept-li 于 2019-02-26

同样的问题，它在ios中运行良好，但得到

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

修改本地hosts文件？

wuxiii 于 2019-03-27

👍1

我使用 Cordova 的 GET 请求在 Android 上返回Error: Network error ，但在浏览器、iOS 模拟器和 iOS 物理设备上运行良好。我的 GET 请求是：

this.axios.get('http://jsonplaceholder.typicode.com/posts/')
      .then(function(response) {
        self.tomData = response
      })
      .catch(function(error) {
        self.error = true
        self.errorText = error
      })

我正在使用 Cordova 8.0.0。我尝试过 HTTPS 和 HTTP，也尝试过不同的域。

sts-ryan-holton 于 2019-05-13

对我有用的不是使用 https://，而是使用 http:// 作为 Android 模拟器。对于 iOS，http:// 不起作用，而 https:// 起作用。

amogh-jrules 于 2019-05-16

👍1

对我有用的不是使用 https://，而是使用 http:// 作为 Android 模拟器。对于 iOS，http:// 不起作用，而 https:// 起作用。

如果我只有一个 https 域，这不是解决方案。

Biplovkumar 于 2019-05-30

这对我有用。

关闭 PC Wifi
关闭模拟器并擦除数据。
启动模拟器
然后打开PC Wifi

我的标题：

headers: {
    'Accept: 'application/json',
    'Content-Type': 'application/json; charset=utf-8'
}

hugosbg 于 2019-06-10

🎉3

我有一个测试应用程序，它的后端是在 Adonis（本地）和前端 react-native 和 axios 中完成的，以显示 API 的获取，但在仿真中它呈现以下错误：
可能的未处理承诺拒绝（id：0）：
错误：网络错误
错误：网络错误...，
在 insonima 中，它可以正常使用方法 GET、POST、DELETE ...
有人可以帮忙。

```从'react'导入反应，{组件};
进口 {

按钮
} 来自 'react-native';

从“axios”导入axios
类应用扩展组件{
handleShowDB = async () => {
const DB = await Axios.get('http://127.0.0.1:3333/users/getuser/1')
控制台日志（数据库）

}
使成为（） {
返回（

Andersonfrfilho 于 2019-07-14

至少对我来说，我有“Adonis”在本地运行的api，我将以下地址放在我的android模拟器中，这与计算机使用的地址不同。

/* Endereços para cada emulador/simulador:
* Genymotion： http ://10.0.3.2:3333/*模拟器安卓工作室：http: //10.0.2.2 :3333/
** 模拟器 IOS： http://localhost :3333/

https://blog.rocketseat.com.br/react-native-autenticacao/

Andersonfrfilho 于 2019-07-15

👍1

这对我有用。
关闭 PC Wifi
关闭模拟器并擦除数据。
启动模拟器
然后打开PC Wifi
我的标题：
headers: {
  'Accept: 'application/json',
  'Content-Type': 'application/json; charset=utf-8'
}

OMG，你节省了我的时间，兄弟！

fxbayuanggara 于 2019-08-23

👍2

没有任何效果。
有什么解决方案吗？

Rupeshiya 于 2019-08-24

👍2

错误是什么？

helloitsm3 于 2019-08-24

你好@helloitsm3 ，刚刚解决了这个问题。遇到与此问题标题相同的错误。
但是修复了它用 $ 10.0.2.2替换localhost $ 并确保数据在 android 模拟器中。

Rupeshiya 于 2019-08-24

👍1

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

当它起作用时，我很失望。

tayfunyasar 于 2019-09-03

👍1

对于在 Android 9 上遇到问题的任何人，只需在 $#$ AndroidManifest.xml $#$ 中将android:usesCleartextTraffic="true"添加到application标记即可。

我通读了上面的所有答案，并添加了对我有用的内容。

yasirlateef 于 2019-09-06

🎉6 👍6

@yasirlateef http请求在 Android 9 或更高版本上默认禁用

此标志android:usesCleartextTraffic="true"启用 http

https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic

ivanguimam 于 2019-11-05

👍5

axios端有什么可做的吗？

yasuf 于 2019-11-05

axios端有什么可做的吗？

Axios端无事可做。您所要做的就是使用 ip 地址而不是 localhost 就可以了

helloitsm3 于 2019-11-07

这似乎是我在特定于 Android 7.0 的 React Native 上遇到的“获取问题”。
原因是使用自签名证书

这可能是问题

christian-hess-94 于 2019-12-20

看起来问题与某些 Android 设置有关。如果 axios 有任何需要改进的地方，请随时提出问题。

chinesedfan 于 2019-12-21

@ghost超级正确，200% 正确

Olayinka-mumin 于 2020-01-03

从localhost更改为您的ip
添加http://

http://192.168.43.49 :3000/user/

KBiswas98 于 2020-01-31

👍1

我的案例通过在 api 调用中通过机器的 ip 更改本地主机来工作

CLQueiroz 于 2020-03-02

我在 AWS EC2 上托管的网站在桌面浏览器中运行良好时遇到了类似的问题，但它没有通过 API（也托管在那里）从数据库中获取数据。我试图通过http://localhost/api/...获取它，并且在桌面上运行良好，但由于某种原因，它在任何 Android 浏览器中都没有（在实际设备上试过，我没有安装 Android Studio）。它给了我网络错误（我通过 logcat 日志发现）。

这里有人建议将 localhost 更改为服务器的实际 IP 地址，即使这在桌面上运行良好，所以我尝试将 URL 更改为http://PUBLIC_IP_ADDRESS/api/...并且它有效！尽管如此，我对这个解决方案并不满意，它是唯一可行的方法。希望这可以帮助某人。