Angular5应用在AWS Apache服务器刷新/新标签打开出现404问题求助

这个问题我之前帮不少开发者排查过——本质是Angular单页应用的前端路由逻辑和Apache服务器的物理文件查找规则不匹配导致的：

• 应用内跳转时，是Angular的前端路由在浏览器端直接处理，不会向服务器发起新的文件请求；
• 但刷新页面或直接在新标签页输入URL时，浏览器会直接向Apache请求该路径对应的物理文件，而Angular的路由路径（比如/user/profile）在服务器上根本没有对应的文件，所以Apache返回"Not found"错误。

Godaddy的服务器应该默认配置了SPA路由的兼容规则，而AWS的Apache需要我们手动配置，下面是具体的解决步骤：

1. 启用Apache的mod_rewrite模块 #

登录你的AWS服务器，找到Apache的主配置文件（通常是/etc/httpd/conf/httpd.conf或/etc/apache2/apache2.conf），检查是否有以下行：

LoadModule rewrite_module modules/mod_rewrite.so

如果这行前面有#注释，去掉注释后重启Apache服务：

# 适用于CentOS/RHEL系统
sudo systemctl restart httpd

# 适用于Ubuntu/Debian系统
sudo systemctl restart apache2

2. 创建/修改.htaccess重写规则 #

在Angular项目部署的根目录（比如Apache默认的/var/www/html）下，创建或编辑.htaccess文件，添加以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  # 直接访问index.html时不做重写
  RewriteRule ^index\.html$ - [L]
  # 判断请求的不是真实存在的文件
  RewriteCond %{REQUEST_FILENAME} !-f
  # 判断请求的不是真实存在的目录
  RewriteCond %{REQUEST_FILENAME} !-d
  # 将所有符合条件的请求转发到index.html，交给Angular路由处理
  RewriteRule . /index.html [L]
</IfModule>

3. 允许Apache读取.htoverride配置 #

回到Apache主配置文件，找到对应部署目录的<Directory>块（比如<Directory "/var/www/html">），确保里面的AllowOverride设置为All：

<Directory "/var/www/html">
  Options Indexes FollowSymLinks
  AllowOverride All
  Require all granted
</Directory>

修改完成后再次重启Apache服务，让配置生效。

额外检查点 #

• 确保你部署的是Angular项目构建后的产物：运行ng build --prod（Angular 5版本支持该命令），将dist目录下的所有文件复制到Apache的部署根目录；
• 确认AWS安全组已经开放80（HTTP）或443（HTTPS）端口，保证外部能正常访问服务器。

按照这些步骤配置后，刷新页面或新标签页打开路由URL应该就能正常加载了，如果还有问题可以补充更多细节哦！

内容的提问来源于stack exchange，提问作者s.jain