TypeError: Network Request Failed when trying to hit local API from android emulator. React-Native

Question

I've seen answers to this question everywhere but none of them seem to work for me.

I'm trying to do a react native fetch from my android emulator and hit my local API running on https://localhost:5002/v1/users.

This is what my fetch looks like right now:

var response: Response = await fetch(`https://10.0.2.2:5002/v1/user/${initialContext.userId}`, {
        method: "GET", 
        headers: {
          "Authorization": `Bearer ${initialContext.accessToken}`
        }
      });

and this is the error that I'm getting:

Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
TypeError: Network request failed
    at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:26139:20
    at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:30727:21
    at _callTimer (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:30643:9)
    at Object.callTimers (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:30851:9)
    at MessageQueue.__callFunction (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2781:31)
    at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2513:17
    at MessageQueue.__guard (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2735:13)
    at MessageQueue.callFunctionReturnFlushedQueue (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2512:14)
    at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\debuggerWorker.js:199:58
    at process.<anonymous> (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\debuggerWorker.js:68:9)

As you can see I've tried running it with 10.0.2.2 (the local host equivalent for the emulator) and I've also tried my computer's IP address. I've also tried running adb reverse and other port forwarding methods.

The hardest part for me to wrap my head around is that if I go to https://10.0.2.2:5002 on chrome on my emulator I'm able to hit my local API. I'm also able to hit an API in the cloud from that fetch statement, just not anything running on local host.

Any ideas would be appreciated.

Answer 1

Actually it's easy to work using ngrok , which acts in between your emulator and localhost(network tunnelling). It provides you with a domain and forwards all your requests to localhost. You can check this documentation https://ngrok.com/docs