AngularJS stateProvider在XAMPP中失效，仅Node.js环境可用

嘿，这个问题我太熟了——你遇到的是前端路由和Apache静态文件处理逻辑的冲突，Node.js环境下正常是因为你用的Node服务器（比如Express）大概率已经配置了路由 fallback，而XAMPP的Apache默认会把URL当成实际文件路径去找，找不到就返回404啦。

别急，按下面几步就能搞定：

1. 先开启Apache的mod_rewrite模块 #

Apache默认可能没开重写模块，这是配置路由转发的前提：

• 打开XAMPP控制面板，点击Apache的「Config」按钮，选择「httpd.conf」打开配置文件
• 找到这一行：#LoadModule rewrite_module modules/mod_rewrite.so，把前面的#去掉（取消注释）
• 保存文件，重启Apache生效

2. 创建.htaccess文件实现路由转发 #

在你的项目根目录（就是index_2.html所在的文件夹）新建一个.htaccess文件，把下面的规则粘贴进去：

RewriteEngine On
# 如果请求的是真实存在的文件或文件夹，直接访问，不做重写
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 其他所有请求，都转发到index_2.html，交给AngularJS处理
RewriteRule ^ index_2.html [L]

这个规则的逻辑很直白：Apache先检查URL对应的文件/文件夹是否真的存在，如果存在就直接返回；如果不存在（也就是你的AngularJS路由），就把请求转到入口文件index_2.html，让前端路由来接管。

3. 确认AngularJS的HTML5模式配置 #

你能在Node环境下用localhost/home/content这种URL，说明已经开了HTML5模式，但还是要确认配置没问题：
在你的AngularJS配置代码里，确保有这一段：

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  // 这里是你的stateProvider路由配置...
  
  // 启用HTML5模式，去掉URL里的#
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false // 如果你的index_2.html在localhost根目录，设为false就行；如果在子目录，比如localhost/blog/，那要改成true，同时在index_2.html的<head>里加<base href="/blog/">
  });
});

做完这三步，再试试直接输入localhost/home/content，Apache就不会再去找不存在的文件，而是把请求交给AngularJS的路由系统处理，就和Node环境下一样正常啦！

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