刷新页面时在服务器上反应应用程序显示 404 页面

Question

我正在使用create_react_app. 现在我将构建移动到服务器并使用serve运行应用程序。我的应用程序将从 apis 加载数据。当我刷新页面时，它显示 404 页面未找到错误。我也试过http-server

当我在某个页面/dashboard并引用该页面时，它显示 404。现在我必须转到BASE_URL/然后才有效。但是在我的本地，当我引用时一切正常。

这是我的 package.json

"react-dates": "^17.0.0",
"react-dom": "^16.4.0",
"react-i18next": "^7.7.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"

我apache在我的服务器上使用。

我认为这不是我的代码的问题。如果你们对此有所了解，请帮助我。

而http-server运行命令是http-server ./build -p 7001

Answer 1

为了避免 Apache 服务器上的 404 错误，您必须启用mod_rewrite并添加.htaccess在根目录中文件

步骤 1 — 启用 mod_rewrite

首先，我们需要激活mod_rewrite。它可用，但未通过干净的 Apache 2 安装启用。

sudo a2enmod rewrite

这将激活模块或提醒您该模块已启用。要使这些更改生效，请重新启动 Apache。

sudo systemctl restart apache2

或者

sudo service apache2 restart

步骤 2 — 设置 .htaccess

默认情况下，Apache 禁止使用.htaccess文件来应用重写规则，因此首先您需要允许对文件进行更改。使用 nano 或您喜欢的文本编辑器打开默认的 Apache 配置文件。

sudo nano /etc/apache2/sites-available/000-default.conf

在该文件中，您会发现从第一行开始的< VirtualHost *:80>块。在该块内，添加以下新块，使您的配置文件如下所示。确保所有块都正确缩进。

<VirtualHost *:80>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

如果你配置了 https，你会在第一行找到一个< VirtualHost *:443>块。在该块内，添加以下新块，使您的配置文件如下所示。确保所有块都正确缩进。在这种情况下，您还需要在 HTTP 和 HTTPS 的 2 个虚拟主机下面添加这个

<VirtualHost *:443>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

保存并关闭文件。要使这些更改生效，请重新启动 Apache。

sudo systemctl restart apache2

或者

sudo service apache2 restart

第 3 步 — 创建 .htaccess

现在，在 Web 根目录中创建以下 .htaccess 文件。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

如果您已经启用了 mod_rewrite 并应用了重写规则，请跳过第 1 步和第 2 步，直接使用第 3 步

我参考了Digital Ocean的React和服务器设置文档

Answer 2

为了详细阐述spash turkane 的答案，我在 CentOS 服务器上工作时遇到了这个挑战。

这是我修复它的方法：

该mod_rewrite模块在 CentOS 上默认启用。如果您发现它在您的服务器上未启用，您可以通过编辑00-base.conf位于/etc/httpd/conf.modules.d/目录中的文件来启用它：

sudo nano /etc/httpd/conf.modules.d/00-base.conf

添加或取消注释以下行：

LoadModule rewrite_module modules/mod_rewrite.so

保存并关闭文件。

.htaccess现在我们可以通过在默认文档根目录中创建一个文件来设置 URL 重写。文件.htaccess允许我们修改重写规则而无需访问服务器配置文件。因此，.htaccess对于您的 Web 服务器至关重要：

将目录更改为文档根目录。对我来说是/var/www/my_app：

cd /var/www/my_app

创建.htaccess文件：

sudo nano .htaccess

添加以下内容：

Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

保存并退出文件。

接下来，我们需要允许 Apache 读取.htaccess位于 Document 根目录下的文件。对我来说是/var/www/my_app：

<Directory "/var/www/my_app">
  Options FollowSymLinks MultiViews
  AllowOverride All
  DirectoryIndex index.html
  Order deny,allow
  Allow from all
</Directory>

保存并关闭文件，然后重新启动 httpd 服务：

sudo systemctl restart httpd

资源：在 CentOS 7 上为 Apache 安装和配置 Mod_rewrite

就这样。

我希望这有帮助

Answer 3

如果您使用的是 Apache HTTP Server，则需要在 public 文件夹中创建一个 .htaccess 文件，如下所示：

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

根据 create-react-app 文档 https://github.com/facebook/create-react-app