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

Question

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

我已经习惯了：

1. 。网络核心6
2. 视觉代码
3. 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();
            }
        }
    }

- Prgoram.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

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

谢谢大家

Answer 1

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

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

Answer 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 请求的权限

Answer 3

在进行 Android 应用程序开发时，我在尝试从 Django 托管的 API 获取内容到我的 React Native 应用程序时遇到了类似的错误。幸运的是，我找到了解决该问题的解决方案。以下是对我有用的步骤：

1. 将您的 IP 添加到 settings.py 中的 ALLOWED_HOSTS：在 Django 项目的 settings.py 文件中，找到 ALLOWED_HOSTS 列表。将您的本地 IP 地址（您可以使用 ipconfig 找到它）添加到列表中。例如：

   ALLOWED_HOSTS = ['IP.IP.IP.IP', '0.0.0.0', '192.0.0.1', '你的IP']

2. 运行服务器时指定 IP 和端口：启动 Django 开发服务器时（例如，使用 python3 manage.py runserver newIP:port），提供您在步骤 1 中添加的 IP 地址。例如：

   python3管理.py运行服务器192.0.0.1:8000

如果您使用像 PyCharm 这样的 IDE，您可以在运行/调试配置中配置这些参数，它们将自动应用。

3. 更新 React Native 应用程序中的获取 URL：确保更新 React Native 代码中的 API 端点以使用新的 IP 和端口。例如：

   fetch('http://newIP:8000/app/data') .then(/* 处理响应 /) .catch(/ 处理错误 */);

总而言之，请记住在开发过程中使用您的本地 IP 地址进行托管，并将其托管在该地址上。