使用没有 SPA 代理的 ASP.Net Core React.js 模板答案

【问题标题】：Use ASP.Net Core React.js Template without SPA Proxy使用没有 SPA 代理的 ASP.Net Core React.js 模板
【发布时间】：2022-01-27 00:53:18
【问题描述】：

在 VS2019 预览版中，您有多个模板。我对以下两个感兴趣：

我都玩了一下，我观察到了不同。在ASP.NET Core with React.js 模板中，启动了一个 SPA 代理服务器，而在ASP.NET Core with React.js and Redux 中，没有它就可以正常工作（第二个模板在 TS 中，而不是 JS 中）。

我所说的simply works without that 是什么意思。我查看了两个 .csproj 文件，发现了一个差异（我只会附上值得注意的差异）：

第一个模板：

...
    <SpaProxyServerUrl>https://localhost:5002</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.0-preview.6.21355.2" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
...

第二个模板：

...
# SpaProxy stuff missing
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="6.0.0-preview.5.21301.17" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>

请注意，在第二个模板中使用Microsoft.AspNetCore.SpaServices.Extensions 而不是Microsoft.AspNetCore.SpaProxy。

Startup.cs 文件也存在一些差异。第二个模板使用了一些额外的中间件

    public void ConfigureServices(IServiceCollection services)
    {
      services.AddControllersWithViews();

      // NEW
      services.AddSpaStaticFiles(configuration =>
      {
        configuration.RootPath = "ClientApp/build";
      });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      ...
      // NEW
      app.UseSpaStaticFiles();
      ...
      // NEW
      app.UseSpa(spa =>
      {
        spa.Options.SourcePath = "ClientApp";

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

我还观察到，在 JS ClientApp 中有一个 setupProxy.js 文件，而在 TS ClientApp 中没有。此外，npm start 命令设置为"start": "rimraf ./build && react-scripts start"，在 TS 文件中它只有react-scripts start。

我尝试进行必要的调整以运行 TS 应用程序这样的 JS 应用程序，但我认为我遇到了问题，因此遗漏了一些东西：

System.Net.Http.HttpRequestException: 无法将请求代理到 http://localhost:61105/，因为对代理目标的请求失败。检查代理目标服务器是否正在运行并接受对 http://localhost:61105/ 的请求。

虽然这个错误确实有道理，但我不知道 TS 模板在哪里以及如何启动这样的代理服务器（如果有的话）。

我的问题是：我可以在JS模板中获取TS模板的行为吗？如果是，如何？如果不是，为什么？

【问题讨论】：

标签： asp.net asp.net-core asp-net-core-spa-services

【解决方案1】：

我不知道 TS 模板在哪里以及如何启动这样的代理服务器（如果有的话）。

这就是spa.UseReactDevelopmentServer(npmScript: "start") 为您所做的。查看您的package.json，您会看到start 脚本在端口5002 上启动代理服务器。

【讨论】：

【解决方案2】：

虽然这个错误确实有道理，但我不知道 TS 模板在哪里以及如何启动这样的代理服务器（如果有的话）。

它没有。我只是花了很长时间追着我的尾巴弄清楚这个魔法......它是 create-react-app：create-react-app docs

如果代理选项对您来说不够灵活，您可以直接访问 Express 应用实例并连接您自己的代理中间件。

您可以将此功能与 package.json 中的 proxy 属性结合使用，但建议您将所有逻辑合并到 src/setupProxy.js 中。

接下来，创建 src/setupProxy.js 并将以下内容放入其中：

This github issue 关于他们所做的更改以及为什么还提供了更多背景信息，但老实说，目前这完全是一团糟。我希望我只是在 .NET 5 上做了一个水疗中心，而不是在所有这些混乱中拖网

【讨论】：