React-native 获取错误“网络请求失败”答案

【问题标题】：React-native get error "Network request failed"React-native 获取错误“网络请求失败”
【发布时间】：2022-09-24 13:57:40
【问题描述】：

我是 react native 的新手，我正在尝试从 API 获取数据，但我累了，找不到解决方案。

我用过：

。网芯 6
视觉代码

expo 运行模拟器 IOS

- 我的反应应用

import { StatusBar } from \"expo-status-bar\";
import { useState } from \"react\";
import { StyleSheet, Text, View } from \"react-native\";
import Home from \"./screens/Home\";

export default function App() {
  const [weather, setWeather] = useState(\"Loading..\");
  const getWeather = async () => {
    var res = await fetch(\"https://192.168.1.205:5001/WeatherForecast\", {
      method: \"GET\",
    })
      .then((response) => response.json())
      .then((responseJson) => {
        alert(\"Succ\");
        // Handle response here
      })
      .catch((error) => {
        console.error(error);
        alert(error);
      });
  };

  // return <Home />
  getWeather();
  return (
    <View>
      <Text></Text>
      <Text style={{ paddingTop: 50, marginLeft: 30 }}>{weather}</Text>
    </View>
  );
}

- 控制器

  using Microsoft.AspNetCore.Mvc;
    
    namespace RestaurantAPI.Controllers
    {
        [ApiController]
        [Route(\"[controller]\")]
        public class WeatherForecastController : ControllerBase
        {
            private static readonly string[] Summaries = new[]
            {
            \"Freezing\", \"Bracing\", \"Chilly\", \"Cool\", \"Mild\", \"Warm\", \"Balmy\", \"Hot\", \"Sweltering\", \"Scorching\"
        };
    
            private readonly ILogger<WeatherForecastController> _logger;
    
            public WeatherForecastController(ILogger<WeatherForecastController> logger)
            {
                _logger = logger;
            }
    
            [HttpGet(Name = \"GetWeatherForecast\")]
            public IEnumerable<WeatherForecast> Get()
            {
                return Enumerable.Range(1, 5).Select(index => new WeatherForecast
                {
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = Random.Shared.Next(-20, 55),
                    Summary = Summaries[Random.Shared.Next(Summaries.Length)]
                })
                .ToArray();
            }
        }
    }

- 程序.cs

var builder = WebApplication.CreateBuilder(args);
var CorsPolicy = \"_myAllowSpecificOrigins\";
// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddCors(options =>

{

    options.AddPolicy(name: CorsPolicy,

                      b =>

                      {

                          b.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();

                      });

});
builder.WebHost.UseKestrel();
builder.WebHost.UseUrls(\"http://localhost:5001\", \"https://192.168.1.205:5001\");
var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

//app.UseHttpsRedirection(); by waleed
app.UseCors(CorsPolicy);
app.UseAuthorization();

app.MapControllers();

app.Run();

- 邮递员请求

在邮递员中调用此网址时，它会获取数据

在可视代码中从 ReactNative 调用 api 时出现此错误：\"网络请求失败\"

笔记：

使用了 localhost url API
使用IP网络攻击服务器端
创建新端口 (\"5001\")
在 program.cs 中添加 CorsPolicy

但得到同样的错误，请任何人帮助我。

谢谢大家

标签： reactjs react-native api mobile entity-framework-6

【解决方案1】：

如果您未设置 Content-type 标头，则在 Android 上获取失败并显示该错误。尝试在您的 fetch 请求中添加一个。

headers: {
  'Content-type': 'application/json'
}

【讨论】：

const getWeather = async () => { var res = await fetch("https://192.168.1.205:5001/WeatherForecast", { method: "GET", headers: { "Content-type": "application/json", }, }) .then((response) => response.json()) .then((responseJson) => { alert("Succ"); // Handle response here }) .catch((error) => { console.error(error); alert(error); }); };我添加了标题但同样的问题“网络请求字段”@cat
是的，不幸的是，这是一条无法描述的错误消息，几乎可以是任何东西。你在什么设备上运行 RN？由于这是一个 GET，您可以将 URL (192.168.1.205:5001/WeatherForecast) 放在设备的浏览器中，看看您是否得到响应？如果超时，请查找防火墙问题。我想知道您是否在运行 API 服务器的机器上运行 Postman，但在被防火墙阻止的单独设备上测试 RN。如果是这种情况，但它可以在浏览器中运行，那么您正在查看一些带有 RN/fetch 的东西，特别是。
将 url 放入浏览器后得到此消息Your connection is not private Attackers might be trying to steal your information from 192.168.1.205 (for example, passwords, messages, or credit cards). NET::ERR_CERT_COMMON_NAME_INVALID 然后在浏览器中按“Proceed to 192.168.1.205 (unsafe)”后，浏览器获取数据。
你去 - 这看起来像实际问题。您遇到了证书错误，这可能就是您的手机拒绝获取的原因。您可以切换到 http，但您需要阅读并点击此文档页面上黄色大框内的链接：reactnative.dev/docs/network。或者你可以在你的服务器上设置一个证书，但这超出了我可以帮助你的范围。

【解决方案2】：

使用您的计算机 IP 地址运行您的后端应用程序，例如在 django 上其 Python manage.py runserver 191.223.233.222:8000 然后在您的反应本机域上使用“http://191.223.233.222:8000”。

还在 iOS 下的 app.json 文件中添加 "ios": { "supportsTablet": true, "infoPlist": { "NSAppTransportSecurity" : { "NSAllowsArbitraryLoads" : true } } }, 授予您允许 http 请求的权限

【讨论】：