React-native 收到错误“网络请求失败”

Question

I'm new to the react native, and I'm trying to get data from API, but I got tired and could not find a solution.

I'm used:

1. . net core 6
2. visual code
3. expo to run simulator IOS

- my react App

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>
  );
}

- Controller

  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();

- Postman Request

when call this url in postman it get data

when call api from ReactNative in visual code get this error:" Network request failed "

Note:

• used the localhost url API
• used the IP network to hit server side
• create new port ("5001")
• add CorsPolicy in program.cs

but get same error, Please can any one help me.

thanks for all

Answer 1

Fetch fails on Android with that error if you don't set a Content-type header. Try adding one to your fetch request.

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

Answer 2

Run your backend app using your Computer IP address eg on django its Python manage.py runserver 191.223.233.222:8000 then use "http://191.223.233.222:8000" on your react native domain.

also on your app.json file under iOS add "ios": { "supportsTablet": true, "infoPlist": { "NSAppTransportSecurity": { "NSAllowsArbitraryLoads": true } } }, to give your permissions to allow http requests