AngularJS stateProvider在XAMPP中失效，仅NodeJS环境可正常路由

这个问题我之前帮朋友排查过好多次啦，本质是Apache和Node服务器对单页应用路由的处理逻辑完全不一样：

• Node环境下你应该是配置了把所有请求都转发到入口文件（比如index_2.html），所以AngularJS的前端路由能正常接管；
• 但XAMPP用的Apache服务器，默认会把URL当作物理文件/目录路径去查找，当你输入localhost/home/content时，它会去服务器上找home/content这个实际存在的文件夹或文件，找不到就抛出“object not found”错误，根本没让AngularJS的stateProvider来处理路由。

下面是具体的解决步骤：

步骤1：开启Apache的URL重写模块 #

首先得确保Apache的mod_rewrite模块是开启的，这是实现URL重写的基础：

1. 打开XAMPP控制面板，点击Apache的「Config」按钮，选择httpd.conf打开配置文件；
2. 在文件里搜索LoadModule rewrite_module modules/mod_rewrite.so，去掉行首的#注释符号；
3. 保存配置文件，重启Apache服务。

步骤2：创建.htaccess配置文件实现URL重写 #

在你的项目根目录（也就是index_2.html所在的目录）创建一个名为.htaccess的文件，写入以下规则：

RewriteEngine On

# 如果请求的是实际存在的文件（比如css、js、图片）或目录，直接放行访问
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# 所有其他请求都重定向到入口文件index_2.html，交给AngularJS处理路由
RewriteRule ^(.*)$ /index_2.html [L]

注意：如果你的项目不是放在Apache的根目录（比如是localhost/blog/下），那RewriteRule的路径要改成/blog/index_2.html，同时记得在index_2.html的<head>里添加<base href="/blog/">标签。

步骤3：确保AngularJS启用HTML5模式 #

如果你的路由是不带#的HTML5模式（看起来你是用的这种），需要在AngularJS的配置里明确开启：

// 假设你的AngularJS应用模块是app
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    // 你的stateProvider路由配置示例
    $stateProvider
        .state('home', {
            url: '/home',
            // 其他路由配置（比如templateUrl、controller）
        })
        .state('home.content', {
            url: '/content',
            // 其他路由配置
        });

    // 启用HTML5模式，去掉URL中的#
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false // 如果项目在根目录可以设为false，否则设为true并配合base标签
    });
});

测试验证 #

做完以上配置后，重启Apache，直接在浏览器输入localhost/home/content，应该就能正常跳转到对应的路由页面，而不会再出现“object not found”的错误了～

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