We're trying to connect to an API (.net core 2.2) from react-native (version 0.59), via localhost, both apparently running on the same ip, different ports, react-native on port 8080, and the api on the 44344, the issue happens the moment we fetch the url from react-native
We've also tested running the url from Postman and everything seems ok, also from any of the web browser installed (safari/chrome), even we tested the browser INSIDE react-native iOS, and it works.
Any api running outside localhost works perfectly, is the localhost were we failed.
Network request failed.
onerror
whatwg-fetch.js:504:29
dispatchEvent
event-target.js:172:43
setReadyState
XMLHttpRequest.js:580:29
__didCompleteResponse
XMLHttpRequest.js:394:25
emit
EventEmitter.js:190:12
__callFunction
MessageQueue.js:366:47
<unknown>
MessageQueue.js:106:26
__guard
MessageQueue.js:314:10
callFunctionReturnFlushedQueue
MessageQueue.js:105:17
callFunctionReturnFlushedQueue
[native code]:0
Part of the code (function) that fetch the api, very simple (for now)
async Submit(){
//GET METHOD
try {
let response = await fetch('https://192.168.1.56:44344/api/values');
let responseJson = await response.json();
return Alert.alert(JSON.stringify(responseJson));
} catch (error) {
console.error(error);
}
}
Ok first of all, we've tried EVERY possible solution,to connect my react native app to my .net core api rest, both running in localhost, this is the list so far, of the things that we've tried so far, and still no result.
we expect react native to fetch the api, so we can continue with the office 365 login authentication.
EDIT: I just discovered that fetching the machine ip (this time running windows), with my ip being 192.168.0.9 both on the api and the react native, the fetch result showed me the 10.0.2.2:80 in the header of the json response. I suppose it is the "localhost" ip from react native. How am I supposed to fetch an ip from localhost if react native is not letting me to do so?
EDIT: We had to go for plan B this time around, we've made it work with a docker on the api, but I need a solution for this problem. I'm 99% sure the issue is react-native and nothing else.
"applicationUrl": "http://192.168.0.114:5001;https:192.168.0.114:5001"
to
"applicationUrl": "http://192.168.0.114:5001"
I got the same issue while fetching localhost API from react-native. Here is what I did to solve this issue. In the startups class, I removed //app.UseHttpsRedirection(); from Configure method.(Not sure if it is needed)
After that in the launchsetting.js file under the properties folder, I changed from
"applicationUrl": " https://localhost:5001;http://localhost:5000 "
to "applicationUrl": " http://localhost:5000 "
and in the React native part, I simply changed my localhost with my IP:
fetch(' http://localhost:5000/values/ ') to fetch(' http://127.0.0.1:5000/values/ ')
This completely worked for me
Take command prompt and type ipconfig, so we will be getting many addresses. From that take IPV4 and copy it to the clipboard. Then paste this address to both the back ends port address and front end port address. eg say IPV4 address is 192.168.1.3 then make you your back end route API similar to this http://192.168.1.3:8080/patients , where 8080 is the port number (never mind). And use the same for the front end to grab the API result.
You have to do two things.
1 - Use http://192.168.1.x:8080 (your local ip ) rather than http:// localhost:8080 in your client.
2 - Add following code snippets to your .net core web api project in Startup.cs.
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://192.168.1.x:8080")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
.
.
.
app.UseCors(MyAllowSpecificOrigins);
Something that worked for me was run adb reverse tcp:<YOUR PORT> tcp:<YOUR PORT>
in terminal
I'm not sure of how it works exactely, but I guess it makes some sort of mapping from the virtual device port to your machine's.
Example:
adb reverse tcp:8080 tcp:8080
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.