将“ react js”构建到我的“ asp.net核心Web API”的wwwroot文件夹时出现路由问题

Question

申请信息

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

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

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

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

问题

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

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

我尝试过的

我已尝试通过替换http错误状态代码404行为来更改web.config文件，以将executiveURL更改为/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>

注意：将现存的Response =“替换”零件更改为其他零件时，此解决方案将中断。

这可以刷新，但会破坏常规的错误响应

参考此解决方案时，常规的HTTP响应将全部替换。

示例：

• 用户输入错误的密码并提交登录请求
• 服务器发送带有正文“密码错误”的400 HTTP错误响应
• 错误响应正文由web.config替换
• 服务器现在仅发送回“错误请求”，而不是“不正确的密码”

我的问题

在保持正确的错误响应消息的同时，有什么方法可以使路由工作吗？

Answer 1

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

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

您可以在web.config文件中添加类似的内容。

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