I am trying to call my asp.net api from react native but it always returns a network error. I have configured my api cors policy to accept all origins, all methods and all headers. I am running the react native app on my ios phone using expo, I configured the url to https as I have read ios blocks http requests by default. I tried using localhost:{port} as my url and my server's ip address and nothing's working. I have been stuck in this issue for 3 days and would appreciate any help.
my c# code:
builder.Services.AddCors(opt =>
{
opt.AddPolicy("CorsPolicy", policy =>
{
policy.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin();
});
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
//app.UseHttpsRedirection();
app.UseCors("CorsPolicy");
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();
my get request is a very simple get request for testing purposes
[AllowAnonymous]
[HttpGet("Get")]
public async Task<ActionResult> Get()
{
return Ok("test");
}
my react native code to call the get method:
let getEmployees = () => {
fetch("https://localhost:7287/get")
.then((res) => {
console.log(res.status);
console.log(res.headers);
return res.json();
})
.then(
(result) => {
console.log(result);
},
(error) => {
console.log(error);
}
);
};
here in my react native code, i'm using localhost but I tried to use my server's ip address as well but still, I get network request failed.
here's the error i'm getting from react native
Network request failed
at node_modules\whatwg-fetch\dist\fetch.umd.js:541:17 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:214:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:357:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:417:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:114:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:4 in callFunctionReturnFlushedQueue
One final thing to note is that all of my api endpoints work perfectly on the browser, postman and swagger. I even tried them on a simple react.js project and they work. Issue only occurs on the react native project. Any help would be massively appreciated.
CodePudding user response:
Can you try with ngrok.io? It'll generate a url which you can use in your application.