移除Angular v15 URL的#后，Apache环境下API请求失效如何解决？

部署Angular v15应用到Apache主机后，移除URL中的#会出现页面刷新404错误。按照官方文档配置.htaccess重写规则后，又出现新问题：所有以/api/开头的请求（例如mywebsite.com/api/login）会被转发到index.html，导致API无法正常响应。需要调整重写规则，让其跳过/api路由。

原网站根目录的.htaccess文件内容如下：

# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION BEGIN
PassengerAppRoot "/home/vitalyto/ptintec-api"
PassengerBaseURI "/"
PassengerNodejs "/home/vitalyto/nodevenv/ptintec-api/16/bin/node"
PassengerAppType node
PassengerStartupFile src/index.js
# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION END
<IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . index.html [L]
</IfModule>

解决方案 #

在重写模块中添加RewriteCond %{REQUEST_URI} !^/api/规则，让重写引擎跳过所有以/api/开头的请求。修改后的.htaccess文件内容如下：

<IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_URI} !^/api/
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . index.html [L]
</IfModule>

修改完成后，Angular v15+应用可正常使用无#的URL，同时/api开头的请求也能正常被后端处理。

更新：后续发现有对应的生成器项目可用于该配置。

内容的提问来源于stack exchange，提问作者vitaly-t