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

Question

如果我忘记添加任何内容，首先表示歉意，这里是新内容！我在使用 react-native-windows 版本 0.63.0-0 和 react-native 版本 0.63.2 时遇到了一个非常奇怪的问题。问题是从我的 windows 笔记本电脑发出的网络调用看起来好像没有尝试执行...期间。它们会立即失败，并且只是 return TypeError。

TypeError: Network request failed

我在 RN/RNW 的全新初始化中发生了这种情况，我已经测试了几个 http 库和调用的变体，例如在 axios 中交换以使用相同的 then 和 catch 获取全部逻辑（为简洁起见，在下面的一些示例中排除）。我尝试过但未能到达几个不同的域。我尝试到达的 API 可用（通过邮递员成功测试）。其他标准的 React-Native 项目在我的笔记本电脑上工作得很好。我已经清除了 metro，运行 --reset-cache，删除了 tmp，重新安装了 node-modules，所有你应该尝试像这样进行故障排除的标准。

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

我在我的调试器控制台中也确实看到了以下错误，尽管我可以从我的 'chrome dev tools -> sources -> page' 面板中看到 debuggerWorker，据我所知，该错误仅与 [=35= 有关] 没有正确处理源映射，请随时在那里纠正我。但是我不确定它们是否相关，或者这是否只是侥幸：

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)

一般我会运行 npx react-native run-windows（或者先单独npx react-native start --reset-cache）来执行项目，但是从VS Code的调试面板调试，以及运行来自 Visual Studio 的 ning 产生相同的错误。

我的 React Native windows 设置是否遗漏了什么？我已经按照 windows 设置一步一步地进行了几次，甚至只是简单地添加一个 http 请求以从他们的默认应用程序执行立即失败......这已经阻止了我一段时间，它真的感觉像是一个环境设置问题，但我不确定我还要检查 Visual Studio/my 配置以解决此问题。

Answer 1

在针对这个问题不断地敲打我的脑袋之后，我继续深入挖掘 Visual Studio 的一面。我逐个文件查找与可能阻止此功能的内容远程相关的任何内容。正如我所料，这是一个不幸的简单解决方案，解决了一些让我非常头疼的事情，因为我没有意识到它并且无法在其他任何地方找到它，所以让这对那些在我之后遇到网络问题的人来说是一个教训 React-Native-Windows:

每当您开始或开始使用网络发送或检索信息的 RNW 项目时，请确保您首先进入 Visual Studio（而非 VScode）并启用“专用网络（客户端和服务器）”选项。如果您在 Visual Studio 中打开您的项目，您可以找到它，它位于

下

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

从现在开始，这有望使您的网络请求成功。

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

Network calls failing instantly in React Native Windows project

http-error

react-native

fetch-api

react-native-windows