AngularJS ui-router+html5Mode+Express嵌套路由刷新报Cannot GET问题

这个问题太常见了——当你启用$locationProvider.html5Mode(true)去掉URL里的#后，页面内部跳转靠Angular的客户端路由没问题，但刷新或直接输入URL时，浏览器会直接向Express服务器请求这个路径，而服务器上并没有对应/parent/child的路由，自然返回Cannot GET /parent/child。

下面分两步解决：

1. 确认AngularJS端的配置正确 #

首先确保你已经在Angular的配置块里正确开启了html5模式，并且设置了基准href：

angular.module('yourApp', ['ui.router'])
  .config(function($stateProvider, $locationProvider) {
    // 确认状态配置（你当前的设置看起来没问题，这里再核对下）
    $stateProvider
      .state('parent', {
        abstract: true,
        url: '/parent'
      })
      .state('parent.child', {
        url: '/child',
        templateUrl: 'views/child.html' // 确保模板路径正确
      });

    // 开启html5模式
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true // 推荐配合index.html的base标签使用
    });
  });

同时在你的index.html头部添加基准href标签：

<base href="/">

这一步是告诉Angular所有路由的基准路径，避免路由解析出错。

2. 配置ExpressJS的回退路由 #

这是解决刷新404的核心——让Express把所有非API/非静态资源的GET请求都返回index.html，这样Angular就能接管客户端路由了。

在你的Express主文件（比如app.js）里，按以下顺序配置路由：

const express = require('express');
const path = require('path');
const app = express();

// 1. 先配置静态资源服务（假设前端文件都放在public文件夹下）
app.use(express.static(path.join(__dirname, 'public')));

// 2. 配置你的API路由（如果有的话）
app.use('/api', require('./routes/api'));

// 3. 最后添加回退路由：所有其他GET请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

注意顺序很重要：必须先处理静态资源和API路由，最后再处理*的回退路由，否则会导致API请求或静态资源都被重定向到index.html。

额外注意事项 #

• 确保index.html的路径正确：如果你的index.html不在public文件夹，要调整path.join里的路径。
• 如果静态资源（比如CSS、JS）加载失败，检查express.static的配置是否正确，确保这些资源的路径能被Express正确解析。
• 如果你使用了其他中间件（比如body-parser），要把它们放在API路由之前，但不影响静态资源和回退路由的顺序即可。

配置完成后，刷新localhost:3000/parent/child，Express会返回index.html，Angular加载后会自动解析URL并跳转到对应的parent.child状态，页面就能正常显示了。

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