Laravel 的公共文件夹 .htaccess 配置中的 ReactJS 应用程序答案

【问题标题】：ReactJS app inside Laravel's public folder .htaccess configurationsLaravel 的公共文件夹 .htaccess 配置中的 ReactJS 应用程序
【发布时间】：2022-10-31 05:20:48
【问题描述】：

我在 Laravel 应用程序的公共目录中托管了一个 React 应用程序，其中：

/public_html/
             app
             bootstrap
             config
             database
             public <--- React App Here
                 static <--- Belongs to React
                 index.html <--- Belongs to React
                 index.php <--- Belongs to Laravel
                 .htaccess <--- htaccess (2)
             .htaccess <--- htaccess (1)
             other laravel folders
             .
             .
             .

根目录的.htaccess htaccess(1) 内容如下，它负责从 Laravel 应用的路由中移除 /public：

RewriteEngine on
RewriteCond %{REQUEST_URI} !^public
RewriteRule ^(.*)$ public/$1 [L]

Laravel 的公用文件夹.htaccesshtaccess(2) 内容如下，我没碰过：

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

RewriteEngine On

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

# Send Requests To Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

问题是当我通过https://myapp.com 访问应用程序时，React 会控制路由，并将我重定向到https://myapp.com/home 视图，而如果我刷新页面，Laravel 的路由会控制并显示@987654329 的 Laravel 404 错误@路由不存在。

如何修复 .htaccess 文件以忽略 React 的路由并仅加载 index.html 文件，同时保持 Laravel 的 /api 路由正常工作？由于所有 React 应用程序路由都使用 Laravel 的 API 控制器。

【问题讨论】：

标签： reactjs laravel .htaccess react-router

【解决方案1】：

为 /api 添加一个重定向到 php 的 RewriteCond，其余的应该转到 html 文件

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

RewriteEngine On

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

# Send Requests To Front Controller...
RewriteCond %{REQUEST_URI} ^/api
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

RewriteCond %{REQUEST_URI} !^/api
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

【讨论】：

感谢您的回复，通过这样做，所有 /api 调用现在都返回 HTML 文件内容。
HTML 文件？它应该加载 php 文件。也许从 ^/api/ 中删除尾随 /，更新了我的答案
不幸的是，即使删除尾部斜杠并使用 /api 也只会返回 index.html 文件的内容。
尝试将 /api 块移动到底部，我已经更新了我的答案
同样的结果，<!doctype html><html lang="en"><head>.......，它正在加载 HTML 文件。

【解决方案2】：

我可以给你我的例子，我最近陷入了同样的问题，如果它对你有帮助，试试这个......

我有一个文件夹名称服务器，然后在服务器中我在 laravel 中有我的后端 api，反应部分在托管的 public_html 文件夹中。

以下配置对我有用

RewriteCond %{HTTPS} !on 
RewriteCond %{HTTP_HOST} =g4shipping.com
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L,NE]

Options -MultiViews

RewriteEngine on

# Final rule for back end index
RewriteRule ^server/public/index.php$ - [L]
# Redirect to back end index
RewriteRule ^api$ server/public/index.php [L]
RewriteRule ^api/.* server/public/index.php [L]

# the below code will help you while you are addressing your react's index.html

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

【讨论】：