如何使反应路由器和 nodejs/express 路由在 cpanel/共享主机中一起工作？答案

【问题标题】：How to make react router and nodejs/express routes work together in cpanel/shared hosting?如何使反应路由器和 nodejs/express 路由在 cpanel/共享主机中一起工作？
【发布时间】：2021-10-08 09:55:09
【问题描述】：

我有一个部署在共享主机/cpanel 上的 MERN 应用。现在我的服务器端工作了，但是当我尝试访问一个页面时，反应路由没有，例如。 domain.com/about ，它在我的服务器上用作获取请求，而不是转到 about 页面。我使用 npm run build，并将 build 文件夹中的所有文件上传到 public_html。然后我将服务器端的存储库（客户端和服务器具有不同的存储库）克隆到 home/username/server。

原来这是我的文件结构

client
    -src
    -package.json
    -etc
    -build (after npm run build)
server
    -app.js
    -models
    -routes
    -events
    -packagejson
    -etc

我在 cpanel 上创建了一个 nodejs 应用程序。这就是我放在我的节点 js 应用程序上的内容。

Application Mode : Product
Application Root : server
Application URL : domain.com
Application Startup file : app.js

现在在我的文件管理器上看起来像这样

/home/username
    -public_html
         -index.html
         -other files from build folder
    -server
         -app.js
         -etc

现在我尝试将此 apache 配置添加到现有的 .htaccess 配置（其中包含 nodejs 的护照配置）

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

这样，我的反应路由器可以工作，但我的服务器不能。如何使服务器路由和反应路由同时工作？对不起，我是新手。谢谢！

【问题讨论】：

标签： node.js reactjs express .htaccess cpanel

【解决方案1】：

我假设您将前端应用程序路由配置为使用浏览器的历史 API，因此您将拥有“不错”的 URL（没有哈希、感叹号等）。

您的问题来自这样一个事实，即现在您有两个应用程序竞争路由解析。一个在前端（在您的情况下是一个 React 应用程序），一个在后端（Web 服务器，通常是 Apache）。您的后端服务器需要知道它应该何时发送到客户端前端应用程序，该应用程序从 index.html 文件引导。因此，当用户刷新页面时（例如通过按键盘上的 F5），服务器将识别出所请求的 URL 属于前端应用程序，并将发送此 index.html 文件。

你有两个选择让它工作：

在 React 应用程序中，从历史 API “干净” URL 切换到“hashbang” 样式 URL，因此您的链接将用于 ex。 domain.com/#!/about 而不是 domain.com/about - 这个解决方案不需要对后端配置进行任何更改，而且很简单（这很有效，因为 # 之后的任何内容都在本地浏览器中解析）。
让后端服务器知道哪些路由属于前端应用程序，并在匹配时始终以index.html 响应 - 这需要正确配置和规则来解析 Web 服务器路由，并且会“覆盖”或“阴影”任何后端路由（或文件）与前端路由（如果有冲突）。您对此进行了尝试，但是它使您的其余后端路由无法使用。有一些变通方法——例如：you could put your app in a subdirectory，使配置更容易；或者您可以在 htaccess 中包含所有前端路由；或者你可以捕获 404 错误然后发送index.html，然后在你的 React 应用程序中仍然找不到特定的路由之后，然后显示 404 页面。如果您不知道自己在做什么，那么我建议您坚持第一个解决方案。

更多信息：

React-router urls don't work when refreshing or writing manually

【讨论】：

【解决方案2】：

我通过在我的应用程序 URL 上添加 /api 解决了这个问题。我的节点 js 应用如下所示：

Application URL : domain.com/api

然后我刚刚在我的路线上添加了/api。

【讨论】：