Home > Software design >  .NET 7.0 and React Native not working with Axios call
.NET 7.0 and React Native not working with Axios call

Time:11-17

My .NET api which was working perfectly well with .NET 6.x is not working with .NET 7. I can make http requests with Thunder Client and Swagger but it won't work with my React Native (expo) app. I tried it with Flutter as well and that didn't work. I get this error:

Possible Unhandled Promise Rejection (id: 1):

I'm using Axios to make the request. My appsettings.json looks like this:

...

"Kestrel": {
    "Endpoints": {
      "Http":{
        "Url": "http://localhost:5000"
      },
      "Https":{
        "Url": "https://localhost:5001"
      }
    }
  },

...

My API call looks like this:

const baseUrl = 'https://localhost:5001/api/users';
const headers = {
    "Content-Type": "application/json",
}


const [user, setUser] = useState(null);
    useEffect(() => {
        axios.get(baseUrl, {headers}).then((response) => {
            setUser(response.data);
            console.log(response.data);
        }).catch(function(error){
            console.log(error);
            console.log(error.response.data);
        });
    }, []);

I have enabled CORS in by Program.cs

...

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: CorsPolicy,
    policy =>
    {
        policy.WithOrigins
        (
            "exp://192.168.0.41:19000",
            "http://localhost:19006",
            "http://localhost:19000"
        )
        .AllowAnyHeader()
        .AllowAnyMethod();
    });
});

...

app.UseCors(CorsPolicy);

...

Is this an issue with .NET 7.0 or is it just coincidence? How can I fix it?

CodePudding user response:

react-native will not work with localhost calls use ngrok to handle this

  • Related