将“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 core 路由。 这将导致 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 重写。

你想要发生的是所有请求都被重写为“/”，这样你的反应应用程序将被加载，反应路由可以接管。 但是，由于您在同一台服务器上运行您的 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>