AngularJS 1.5.8+UI Router配置Apache HTML5模式遇重定向问题

我之前在AngularJS项目里也踩过一模一样的坑，结合你的配置细节，咱们一步步来修正：

1. 先确认Apache核心模块启用 #

首先得确保mod_rewrite模块已经开启，在MacOS的Apache环境下执行以下命令：

sudo a2enmod rewrite
sudo apachectl restart

2. 修正Apache虚拟主机配置 #

你的虚拟主机配置有几个关键细节需要调整，比如指令顺序和重写规则的可靠性，以下是经过验证的正确配置：

<VirtualHost *:80>
    ServerName <servername>
    DocumentRoot "/Users/<name>/Sites/<sitename>"

    # 先配置目录权限和基础选项，确保生效优先级
    Options Indexes FollowSymLinks
    Require all granted

    # 开启重写引擎
    RewriteEngine On
    # 调试用日志（正常运行后可以注释掉）
    LogLevel debug rewrite:trace6

    # 如果请求的是真实存在的文件或目录，直接返回内容
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # 所有不存在的请求转发到根目录的index.html
    RewriteRule ^ /index.html [L]
</VirtualHost>

核心调整点：

• 把Options和Require指令放在重写规则之前，确保目录权限和基础选项先生效
• 用%{REQUEST_FILENAME}替代%{DOCUMENT_ROOT}%{REQUEST_URI}，前者是Apache解析后的实际文件路径，匹配更准确
• 最后一条重写规则加上/前缀，明确指向根目录的index.html

3. 确认本地Hosts映射 #

确保你配置的<servername>已经在本地/etc/hosts文件里做了映射：

127.0.0.1 <servername>

配置完成后刷新本地DNS缓存：

sudo dscacheutil -flushcache

4. 验证HTML的base标签和资源路径 #

你的index.html里的base标签是正确的（因为站点部署在域名根目录），但要确保：

• base标签必须放在<head>的最顶部，在所有资源引用之前
• 所有静态资源（js/css）都使用绝对路径（比如/js/jquery.min.js），避免嵌套路由下资源加载错误

正确的头部示例：

<head>
    <base href="/">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/angular.min.js"></script>
    <!-- 其他css/js资源 -->
</head>

5. 保持AngularJS配置不变 #

你的$locationProvider配置是完全正确的，不需要修改：

$locationProvider.html5Mode({enabled:true,requireBase:true}).hashPrefix('!');

完成以上所有调整后，重启Apache服务，再测试刷新深层嵌套链接或点击外部邮件链接，应该就能正常跳转到对应的路由页面了。

内容的提问来源于stack exchange，提问作者ReverseLogic Social