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

Question

申请信息

我的应用程序使用 asp.net 核心网络 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 行为以将执行 URL 更改为 /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 错误响应正文 "incorrect password"
错误响应正文替换为 web.config
服务器现在只发回 "bad request" 而不是 "incorrect password"

我的问题

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

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>

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

Routing problem when building "react js" to wwwroot folder of my "asp.net core web api"

c#

asp.net

reactjs

routing

web-config