Angular.js/Express/Node应用路由与POST请求异常问题

这问题我熟得很！本质是单页应用（SPA）的前端路由和服务器端路由的冲突：当你直接在浏览器敲入my.com/users，浏览器会直接向服务器发起这个路径的请求，但你的Express服务器压根没配置这个路由，自然就报错了。结合你用uiRouter的情况，给你两套落地性极强的解决办法：

你需要在Express的主配置文件（比如app.js或server.js）里，把所有非API、非静态资源的请求，都转发到Angular的入口文件index.html。这样服务器收到/users这类请求时，会先返回前端的入口页面，再由uiRouter在前端接管路由逻辑。

示例代码如下：

// 先配置你的API路由，比如接口请求都走/api前缀
app.use('/api', require('./routes/api'));

// 配置静态资源目录（假设你的Angular打包文件存在public文件夹里）
app.use(express.static(path.join(__dirname, 'public')));

// 兜底路由：所有未匹配到的请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

⚠️ 重点提醒：这个兜底路由必须放在所有其他路由的后面，不然会把你的API请求也拦截到index.html，导致接口无法正常调用！

如果你不想URL里带#（比如把my.com/#/users改成更清爽的my.com/users），可以配合uiRouter开启HTML5模式，同时还要做两步配置：

1. 在uiRouter的routes.js里开启HTML5模式：

angular.module('yourApp')
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
    function($stateProvider, $urlRouterProvider, $locationProvider) {
      // 开启HTML5模式，移除URL中的#
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix(''); // 兼容旧版Angular的hash处理问题

      // 你的原有路由配置
      $stateProvider
        .state('users', {
          url: '/users',
          templateUrl: 'views/users.html',
          controller: 'UsersController'
        });

      $urlRouterProvider.otherwise('/');
    }
  ]);

2. 在Angular的index.html的<head>标签里添加<base>标签，指定页面的基础路径：

<base href="/">

3. 最后还是要加上解决方案1里的Express兜底路由，不然直接输入URL依旧会报错。

• 静态资源路径要确认：确保Express正确配置了静态资源目录，不然Angular的JS、CSS文件会加载失败。
• 开发环境和生产环境区分：用ng serve开发时，Angular CLI已经默认处理了路由 fallback，但部署到Express服务器时必须自己配置兜底路由。

这样配置完，不管是直接输入URL还是通过页面跳转，路由都能正常工作了！

内容的提问来源于stack exchange，提问作者Angélique Cléry