将“react js”构建到我的“asp.net core web api”的 wwwroot 文件夹时出现路由问题

Question

申请信息

我的应用程序在服务器端使用 asp.net core web API，在客户端使用 React js。

在发布应用程序之前，react js 代码直接构建到我的 asp.net Core Web API 的 www 根文件夹中。这允许在同一个 URL 上托管客户端和 API。

我的客户使用的是 SPA 并使用反应路由。从“localhost:44362/”开始时，我的 asp.net 核心应用程序将用户重定向到我的 www-root 文件夹中的 index.html 文件。

当这种情况发生时，客户端开始使用 react-router 包。

问题

假设我们当前的位置是“localhost:44362/dashboard” 当我们刷新页面时，我们不会直接通过 react 路由，而是首先通过 asp.net 核心路由。这将导致 404 页面，因为服务器找不到实际路由。

实际上应该发生的是，在刷新页面时应该通过 index.html 并在执行 /dashboard 请求之后。

我的尝试

我已尝试更改 web.config 文件以替换 http 错误状态代码 404 行为以将 executionURL 更改为 /index.html，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
      <remove statusCode="404" />
      <error statusCode="404" responseMode="ExecuteURL" path="/index.html" />
    </httpErrors>
  </system.webServer>
</configuration>

注意：将 existingResponse="Replace" 部分更改为其他内容时，此解决方案会中断。

这适用于刷新，但会破坏常规错误响应

在提到这个方案的时候，常规的HTTP响应都会被替换掉。

示例：

• 用户填写错误密码并提交登录请求
• 服务器发送 400 HTTP 错误响应，正文为“密码错误”
• 错误响应正文由 web.config 替换
• 服务器现在只发回“错误请求”而不是“密码错误”

我的问题

有什么方法可以让路由正常工作，同时仍然保留正确的错误响应消息？

Answer 1

您可以尝试在 web.config 中使用 url rewriting。

您想要发生的事情是所有请求都被重写为“/”，这样您的 react 应用程序就会被加载，并且 react 路由可以接管。但是，由于您在同一台服务器上运行您的 api，因此您需要排除针对您的 api 的请求。 （在这种情况下，我假设每个 api 端点都以“/api”开头，因为您使用的是 asp.net 核心）

您可以将这样的内容添加到您的 web.config 文件中。

<rewrite>
  <rules>
    <rule name="Redirect to react">
      <match url="^(!?(api\/))(.*)$"/>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>