React Native 中使用axios发送后端请求报错如何解决？

问题原因 #

你这段代码在React JS网页端能正常运行，是因为网页运行在你的开发电脑浏览器上，localhost指向的就是电脑本身的后端服务，但React Native运行在移动模拟器/真机上时，localhost指向的是设备自身，自然找不到后端服务，就会报网络连接错误。

解决方案 #

• 替换请求地址：
  • 安卓模拟器测试：将请求地址里的localhost替换为安卓模拟器预留的主机映射IP10.0.2.2，修改后地址为http://10.0.2.2:8000/auth/jwt/create/
  • iOS模拟器测试：将localhost替换为你开发电脑的局域网IP，比如你的电脑内网IP是192.168.3.15，地址就改成http://192.168.3.15:8000/auth/jwt/create/
  • 真机测试：保证手机和开发电脑连接同一个WiFi，同样使用电脑的局域网IP作为请求地址
    注意要确认你的后端服务是绑定在0.0.0.0而不是127.0.0.1，否则局域网IP也无法访问到后端
• 安卓端额外配置：安卓9及以上系统默认禁止HTTP明文请求，如果你没有给后端配置HTTPS证书，需要在android/app/src/main/AndroidManifest.xml的application标签中添加android:usesCleartextTraffic="true"属性，允许明文网络请求。

代码优化建议 #

axios发POST请求时会自动将传入的对象序列化为JSON，也会自动添加Content-Type: application/json请求头，你可以简化代码避免不必要的操作：

export const login = (email, password) => async dispatch => {
    const res = await axios.post(`http://替换为你的实际请求地址/auth/jwt/create/`, { email, password });
    console.log('kk');
    dispatch({
        type: LOGIN_SUCCESS,
        payload: res.data
    });

    dispatch(load_user());
};

内容的提问来源于stack exchange，提问作者Ruma。