在没有 SPA 代理的情况下使用 ASP.Net Core React.js 模板

Question

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

我对两者都进行了一些尝试，发现了一些差异。在ASP.NET Core with React.js模板中，启动了 SPA 代理服务器，而在 中则ASP.NET Core with React.js and Redux无需启动 SPA 代理服务器（第二个模板在 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。第二个模板使用了一些额外的中间件

...
    <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>
...

我还观察到，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模板的行为吗？如果是，怎么办？如果没有，为什么？

Answer 1

1. 创建“ASP.NET Core Web API”项目
2. 在 launchSettings 中将 https.applicationUrl 设置为“https://localhost:3000;http://localhost:3001”
3. 将 WeatherForecastController 从 [Route("[controller]")] 更改为 [Route("api/[controller]")]
4. 将 ClientApp 文件夹添加到解决方案
5. 在 ClientApp 内运行 >npm create vite@latest 并选择您的模板（react/vue/等）
6. npm 安装“vite-plugin-mkcert”
7. 使用以下内容更新 vite.config.ts。这将在 https://localhost:5000 上运行前端，在 https://localhost:5000/api 上运行后端，代理到 https://localhost:3000/api

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mkcert from "vite-plugin-mkcert";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), mkcert()],
  server: {
    port: 5000,
    https: true,
    strictPort: true,
    proxy: {
      "/api": {
        target: "https://localhost:3000",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, "/api"),
      },
    },
  },

6. 现在您可以重新启动后端，而无需启动/停止前端或搞乱 Microsoft SpaProxy 的废话。

Answer 2

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

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