开箱即用 VS 2022 SPA React App 不会路由 Web API

Question

我构建了一个 VM 运行ning Windows 11 并安装了 VS 2022 来使用它。我知道我不是第一个运行解决这个问题的人，但我似乎找不到任何关于如何让它工作的信息。

我确实创建了一个开箱即用的 ASP.NET Core with React 应用程序。我添加了一个新控制器

using Microsoft.AspNetCore.Mvc;

namespace Zignificant.WebApp.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class TestController : ControllerBase
    {
        [HttpGet]
        public IActionResult Get()
        {
            return Ok("test");
        }
    }
}

当我启动应用程序时，我可以轻松点击 PostMan 内置的天气控制器。但是，当我尝试在新的测试控制器上执行 HttpGet 时，我得到了这个：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <base href="/" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Zignificant.WebApp</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="/static/js/bundle.js"></script>
    <script src="/static/js/vendors~main.chunk.js"></script>
    <script src="/static/js/main.chunk.js"></script>
</body>

</html>

我尝试删除测试控制器上路由的“api”部分，认为它妨碍了但什么也没有。

这是开箱即用的应用程序模板。

还有其他人看到过这个问题吗？还是我遗漏了什么？

在此先感谢您的帮助！

更新 #1：我检查了 launchSetting.json 并注意到原始端口或 7008:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:2817",
      "sslPort": 44302
    }
  },
  "profiles": {
    "Zignificant.WebApp": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7008;http://localhost:5008",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    }
  }
}

我将端口更改为 launchSettings.json 文件中指定的端口，并且调用 API 似乎在 PostMan 中有效。

但是，当我尝试从 React 应用程序获取数据时，这仍然对我没有帮助。这样做会给我一个 CORS 错误。

仍在尝试理解这一点...似乎代理端口导致了某种我无法弄清楚的问题。感谢任何帮助。

更新 #2 因此，显然您已经在 setupProxy.js 文件中添加了您计划在 React 应用程序中使用的任何新控制器：

const createProxyMiddleware = require('http-proxy-middleware');
const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:2817';

const context =  [
  "/weatherforecast",
  "/api/test"
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false
  });

  app.use(appProxy);
};

我觉得这样做有点矫枉过正。然而，我是开放的，微软过去曾用我认为是矫枉过正的结果让我感到惊讶。

我想听听某人使用这种方法的好处。再次感谢您的帮助。

Answer 1

我在将控制器添加到 Visual Studio 2022“out-of-the-box”.NET Core React SPA 模板时遇到了同样的问题。我为让它工作所做的是找到文件 setupProxy.js，在当前模板中它位于此处：ClientApp\src\setupProxy.js。在这个文件中，我添加了到新控制器的路由：

const context =  [
    "/weatherforecast",
    "/api/test"
];

通过这个简单的添加，我能够点击控制器操作并获得有效响应。我没有在任何地方找到这个记录，但它对我有用。

开箱即用 VS 2022 SPA React App 不会路由 Web API

Out of box VS 2022 SPA React App won't route Web API

reactjs

asp.net-core

visual-studio-2022