发布应用程序时的.Net Core React SPA路由问题答案

【问题标题】：.Net Core React SPA routing issues when app is published发布应用程序时的.Net Core React SPA路由问题
【发布时间】：2020-02-24 23:26:00
【问题描述】：

我有一个在前端使用 react 的 .net core 2.2 SPA。在反应方面，我只是使用 href 对后端进行 GET 调用。

<a href={`http://localhost:5004/api/Reports?team=${this.state.teamName}&project=${this.state.projectName}`} class="button">Submit</a>

当我从 Visual Studio 调试应用程序时，路由得到正确处理，它调用后端控制器并下载文件。

当我将应用程序作为自包含的 exe 发布时，react 应用程序似乎正在拦截路由，因此当单击按钮以及尝试直接在浏览器中调用该 api 时，它会显示 SPA Fallback url。

我尝试从 app.UseMVC 中删除 MapSpaFallbackRoute 部分，并传递完整的 URL 和部分，无论哪种方式它都无法正确路由到控制器。

这里是启动中的路由

app.UseMvc(routes =>
      {
        routes.MapRoute(
                  name: "default",
                  template: "{controller}/{action=Index}/{id?}");

        routes.MapSpaFallbackRoute(
          name: "spa-fallback",
          defaults: new { controller = "Home", action = "Index" });
      });

以及 UseSpa 部分

app.UseSpa(spa =>
      {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
          spa.UseReactDevelopmentServer(npmScript: "start");
        }
      });

什么会导致路由在发布和通过 Visual Studio 运行时表现不同？

【问题讨论】：

检查this问题及其答案。

标签： asp.net-mvc reactjs .net-core single-page-application

【解决方案1】：

所以我偶然发现了一个与此非常相似的问题。我正在使用 VS2019 开发一个 ASP.NET Core / ReactJS 应用程序。开发时，调用 .NET API 后端一切正常，但是当我部署到生产环境时，在浏览器中导航到 API 调用的路由会导致返回 React 应用程序而不是 API 调用。如果我在浏览器中对这些页面进行硬重新加载，将返回 API 响应，而不是 React 应用程序。

我通过删除默认包含在项目的 React / JS 部分中的 registerServiceWorker 调用解决了这个问题。通过使用浏览器开发工具 (F12) 并选择“应用程序”选项卡，我能够检查服务工作是否存在。

【讨论】：

在我的情况下是愚蠢的服务人员。我从我的索引中删除了 register 方法调用，现在路由工作正常。它造成的问题多于好处。

【解决方案2】：

我遇到了同样的问题，我发现我的 API 在 IIS 上启动时出现问题。所以对 /api 的请求没有得到解决并回退到 React 应用程序。我修复了 API 问题，现在 /api 正在访问控制器。

因此，请确保修复所有 API 问题并且控制器服务器已启动。

【讨论】：