React Native Windows 项目中的网络调用立即失败

Question

first off apologies if I've forgotten to include anything, new here! I am having a pretty odd issue using react-native-windows version 0.63.0-0 with react-native version 0.63.2. The problem is that network calls made from my windows laptop appear as if they are not attempting to execute... period. They fail instantaneously and simply return a TypeError.

TypeError: Network request failed

This happens to me on a completely fresh init of RN/RNW, and I've tested with a couple http libraries and variations of calls, such as swapping in axios for fetch all using the same then and catch logic (excluded on some examples below for brevity's sake). I have tried and failed to reach several different domains. The API I'm attempting to reach is available (tested successfully with postman). Other standard React-Native projects work just fine from my laptop. I've cleared metro, run --reset-cache, removed tmp, reinstalled node-modules, everything standard you're supposed to try to troubleshoot like that.

fetch('https://subdomain.domain.com/<api-path>', { // my example then & catch
      method: "GET",
      headers: { "Content-Type": "application/json" }
    })
      .then(response => response.json())
      .then(responseData => console.log(responseData))
      .catch(error => console.log(error));
fetch('https://subdomain.domain.com/<api-path>'); // without headers this time, used same then & catch block
axios.get('https://subdomain.domain.com/<api-path>'); // again used same then & catch
// ... and so on, triggering the catch block instantly, as if it fails without trying

I do also see the following error in my debugger console, even though I can see the debuggerWorker from within my 'chrome dev tools -> sources -> page' panel which from what I understand, the error just has to do with chrome not handling source maps correctly, feel free to correct me there. However I'm unsure whether they are even related or if this one is just a fluke:

Error: Unable to resolve module `./debugger-ui/debuggerWorker.cff11639.js` from ``: ./debugger-ui/debuggerWorker.cff11639.js could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at C:\Users\...\node_modules\metro\src\lib\transformHelpers.js:267:42
    at Server.<anonymous> (C:\Users\...\node_modules\metro\src\Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\...\node_modules\metro\src\Server.js:99:24)
    at _next (C:\Users\...\node_modules\metro\src\Server.js:119:9)

Generally I'll run npx react-native run-windows (or npx react-native start --reset-cache separately first) to execute the project, but debugging from VS Code's debug pane, as well as running from Visual Studio produce the same errors.

Is there something I am missing with my react native windows setup? I have followed the windows setup step by step several times and even simply adding an http request to execute from their default app instantly fails... This has blocked me for a while and it really feels like an environment setup issue, but I'm not sure what else I would check in Visual Studio/my configs in order to resolve this.

Answer 1

After some more continuously banging my head against this issue, I continued to dig a little further into Visual Studio's side. I went file by file looking for anything remotely related to what might be blocking this functionality. As I expected, it was an unfortunately simple solution to something that caused me a significant headache since I wasn't aware of it and could not find it anywhere else, so let this be a lesson to those after me who have network problems with React-Native-Windows:

Whenever you are beginning - or picking up - a RNW project that uses the network to send or retrieve information, make sure that you have first gone into Visual Studio (not VScode) and enabled the "Private Networks (Client & Server)" option. You can find this if you open your project in Visual Studio, and it's under

Project Solution -> 'Package.appxmanifest' file -> 'Capabilities' section

This should hopefully cause your network requests to succeed as you would expect from now on.