React native 对localhost终结点的React本机提取调用给出类型错误：使用https时网络请求失败

我在expo客户端上运行了一个react本机应用程序，它在android Studio Emulator上使用

npm run android

，当我在Visual Studio项目设置上禁用Enable SSL时，使用fetch获取数据的WebApi调用工作得非常好，如下所示，这意味着它在http端口54715上运行，如果您看到箭头标记I未选中启用SSL复选框

我还在applicationhost.config文件中做了更改，将我的localhost指向127.0.0.1，这是10.0.2.2从Android emulator连接的别名，请参见以下内容：

 <bindings>
      <binding protocol="http" bindingInformation="*:54715:127.0.0.1" />
      <binding protocol="http" bindingInformation="*:54715:localhost" />
      <binding protocol="https" bindingInformation="*:44367:127.0.0.1" />
 </bindings>

但当我在项目属性上单击EnableSSL时，它将在自我认证的https端口上运行

https在44367端口上运行，当我获取web api时：

fetch("https://10.0.2.2:44367/WeatherForecast/getAllProgramTypes")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

现在有了https，我得到了类型错误：网络请求失败，它无法在本地主机上进行https调用

当我取消选中启用SSL并运行.Net核心解决方案时，它可以与http一起工作，但是如何使用本地https进行获取调用呢

当我查看Microsoft文档时，它说绕过证书安全检查，如何使用react本机代码

---

很遗憾，在Javascript中绕过证书安全检查似乎是不可能的。 可能的解决办法：

将自签名证书添加到本地计算机上的根证书存储库中

从免费服务（如）获取有效的签名证书

---

所以，http或https即使在Android Emulator上工作，问题还是在于它在iPhone设备或Android设备上如何工作，我的意思是，如果你使用Expo客户端应用程序打开你的本地应用程序，现在，如何将本地主机.NET Core WebApi或本地计算机上的任何其他终结点连接到移动设备以运行应用程序

我有一个通用的工作解决方案，它适用于各个设备上的模拟器和移动应用程序

步骤1：转到

步骤2：注册，您可以使用GitHub帐户

第三步：点击下载windows如果你有windows操作系统并解压缩文件，你将 查看.exe，将其复制到桌面或所需位置

步骤4：转到windows资源管理器并在复制文件的位置上打开命令提示符 exe，运行

dir

检查您所在的位置是否有ngrok.exe

步骤5：运行ngrok authtoken yourtokengiveduringsignup，这是您可能需要的一次性操作 做

步骤6：运行

ngrok httphttps://localhost:PortNumber -host header=“localhost:PortNumber”

，端口号是您的.NET核心解决方案正在运行的端口，请在项目属性中启用SSL，我们需要https才能使其工作

步骤7：复制https链接，该链接将是ngrok创建的https URL，突出显示，如下例所示

现在，您可以使用上面的链接替换获取url中的内容，以使移动应用程序或模拟器能够从您的本地代码工作

注意***我们需要在步骤6上运行ngrok&我们的解决方案，而且url每次都不同，因此运行步骤6和.NET核心解决方案生成新的web地址，并在react原生应用程序中使用它

快乐编码：）

fetch("https://10.0.2.2:44367/WeatherForecast/getAllProgramTypes")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });