React Native请求本地C# WebAPI的fetch接口返回Network request failed错误如何解决

核心原因 #

你代码中请求的localhost指向的是运行React Native应用的移动端设备（模拟器/真机）自身的本地地址，而非运行C# WebAPI的开发电脑的地址，因此根本无法访问到你本地启动的接口服务。

分场景解决方法 #

• 安卓模拟器场景
  安卓模拟器默认将开发电脑的地址映射为10.0.2.2，直接将请求地址中的https://localhost:44371替换为https://10.0.2.2:44371即可。
  注意：你本地WebAPI使用的是自签名SSL证书，安卓系统默认会拦截不信任的证书请求，测试阶段可以暂时将接口改为HTTP协议，或者在安卓网络安全配置中添加本地证书的信任规则。
• iOS模拟器场景
  先查询开发电脑的局域网IP地址（Windows系统执行ipconfig，Mac/Linux系统执行ifconfig，一般为192.168.x.x格式），将请求地址替换为https://[你电脑的局域网IP]:44371即可。
• 真机测试场景
  确保手机和开发电脑连接同一个WiFi，同样使用电脑的局域网IP替换localhost，同时关闭电脑的防火墙，或者开放44371端口的入站访问规则。

后端WebAPI额外配置调整 #

1. 调整监听地址
   默认ASP.NET Core只允许本机localhost访问，需要修改配置允许外部IP访问，启动时添加参数--urls https://0.0.0.0:44371，或者在appsettings.json中添加如下配置：

"Kestrel": {
  "Endpoints": {
    "Https": {
      "Url": "https://0.0.0.0:44371"
    }
  }
}

2. 修正CORS中间件顺序
   ASP.NET Core的中间件执行顺序会影响功能生效，你当前的UseCors放在了UseAuthorization之后，会导致CORS策略不生效，需要调整Startup.cs中Configure方法的中间件顺序：

app.UseRouting();
// 将UseCors移到UseRouting之后、UseAuthorization之前
if (env.IsDevelopment() || env.IsEnvironment("Local"))
{
    app.UseCors("DevPolicy");
}
else if (env.IsProduction())
{
    app.UseCors("ProdPolicy");
}
app.UseAuthorization();
app.UseAuthentication();

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