React Native在安卓虚拟机上运行时，利用fetch大概axios向后端索取数据时候 ...

问题

如标题，我想向我的后端发送一个请求，但是提示网络错误。但是并不是对全部的url（差别域名大概ip地址）都是提示错误，有部分url能够成功获取数据。已知利用的后台都是精确可用的。

1. axios
2.       .get('http://xxx.xxx.xxx.xxx:3000/api/...', {
3.         headers: {
4.           Accept:
5.           'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
6.           'Content-Type': 'application/json',
7.           'user-agent':
8.             'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/',
9.           'Access-Control-Allow-Origin': '*', // 允许跨域
10.         },
11.       })
12.       .then(res => {
13.         console.log(res);
14.       })
15.       .catch(err => {
16.         console.log(err);
17.       });

复制代码

问题分析

看了很多中文答案，但是都不凑效，那么就只有对问题进行分析了

• 起首无论是控制台还是flipper如许的debug工具，都未详细说明为什么网络请求失败，以是不清除详细缘由。
  
• 利用flipper的网络检测工具，发现这些错误请求压根就没有发送出去，网络请求一栏中全部都是空缺，以是应该是RN把这个请求拦截了，与后端服务器无关。
  
• http和https测试后均表现可以成功发送部分请求，说明错误与协议无关。
  
• 无论利用ip地址还是域名作为url，都有成功发送请求的实例，说明与用ip地址大概域名是无关的。
  
• 当然fetch和axios都同时成功大概失败，那么自然说明与请求的方法无关。
  
• 什么请求头啊、跨域什么都也弄了的，以是与这个无关
  

这就很神奇了，太神奇了！这是个什么缘由。只有从stackoverflow之类的地方看看国外大神了，他们也说到了一个大概原因；

• ios中仅支持https，不外android没有这个问题。过！
  
• 没有设置<uses-permission android:name="android.permission.INTERNET" />
  
• 没有设置form范例
  
• 等等都没用实际作用的
  

后面看到github相干issue发现大概与ca证书有关，我的后端没有备案只用利用ip地址访问，同时为了安全我又申请了zeroSSL的相干证书，大概就是与ca证书不被这个安卓辨认的原因，但是链接被拒绝的原因。
解决问题

没有证书，我就给它证书。参考相干内容（须要翻墙）对ca进行设置。
1.起首在android/app/src/main/AndroidManifest.xml中进行修改
  

1. <manifest xmlns:android="http://schemas.android.com/apk/res/android">
3.     <uses-permission android:name="android.permission.INTERNET" />
5.     <application
6.       android:usesCleartextTraffic="true"
8. <-- 增加下面一行，标志出安全文件的xml位置 -->
9.       android:networkSecurityConfig="@xml/network_security_config"
11.       android:name=".MainApplication"
12.       android:label="@string/app_name"
13.       android:icon="@mipmap/ic_launcher"
14.       android:roundIcon="@mipmap/ic_launcher_round"
15.       android:allowBackup="false"
16.       android:theme="@style/AppTheme">
17.       <activity
18.         android:name=".MainActivity"
19.         android:label="@string/app_name"
20.        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
21.         android:launchMode="singleTask"
22.         android:windowSoftInputMode="adjustResize"
23.         android:exported="true">
24.         <intent-filter>
25.             <action android:name="android.intent.action.MAIN" />
26.             <category android:name="android.intent.category.LAUNCHER" />
27.         </intent-filter>
28.       </activity>
29.     </application>
30. </manifest>

复制代码

2.然后android/app/src/main/res/xml/network_security_config.xml（没有就创建一个）中写下ca的相干安全设置
  

1. <network-security-config>
2.     <base-config cleartextTrafficPermitted="true">
3.         <trust-anchors>
4.             <!-- 信任系统默认的CAs -->
5. <!--            <certificates src="system" />-->
6.             <!-- 信任用户安装的CAs -->
7.             <certificates src="@raw/certificate" />
8.         </trust-anchors>
9.     </base-config>
10. </network-security-config>

复制代码

3.然后进入到android/app/src/main/res/raw文件夹（没有就创建），把目的服务器的certificate.pem大概certificate.crt证书放到这个文件夹
4.末了npm run android下令重新构建一下就好了。
当然上述的文件夹啊、文件位置什么的都可以本身决定，然后就能解决问题了！
  参考



   参考c网络安全设置  |  App quality  |  Android Developers
  javascript - React Native fetch() Network Request Failed - Stack OverflowHTTP Fetch fails with "TypeError: Network request failed" => Resolved · Issue #32931 · facebook/react-native · GitHub
HTTP Fetch fails with "TypeError: Network request failed" => Resolved · Issue #32931 · facebook/react-native · GitHub
 
  另一个小问题

开发过程中须要访问localhost:3000后端，但是也会提示上面类似错误，但是实际上是因为虚拟机与本地电脑桥接问题
解决方案如下

• 利用"adb reverse tcp:3000 tcp:3000"，将两个端口映射一下
  
• 再就是比较简朴的，用10.0.2.2这个ip地址替代localhost就好了
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。