Angular应用HTML5模式刷新404问题求助：本地正常服务器异常

我来帮你解决这个Angular HTML5模式刷新404的问题，结合你的场景，问题核心是部署环境下前端路由请求没有被正确转发或重写到index.html，下面分几种情况给出针对性解决方案：

本地开发用Grunt Livereload是为了热重载方便，但部署环境没必要同时跑Grunt和Node两个服务器。让Node直接托管Angular构建后的静态文件，同时处理路由重写，这样所有请求都走Node端口（11000），从根源避免跨端口问题。

步骤如下：

1. 先完成Angular的生产构建，生成静态文件包（通常在dist目录下）。
2. 修改Node的app.js，先配置静态文件托管，再添加路由重写规则：

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

// 托管Angular构建后的静态文件
app.use(express.static(path.join(__dirname, 'dist')));

// 所有非静态资源的请求，直接返回index.html交给Angular处理路由
// 注意：这条规则一定要放在静态文件托管之后，否则会覆盖静态资源请求
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(11000, () => {
  console.log('Node服务器运行在11000端口');
});

3. 部署时启动Node服务器即可，访问http://serverIP:11000，刷新任何路由都不会再出现404。

如果你必须保留Grunt的9000端口作为前端服务器，需要修改Grunt的middleware配置，确保：

• 前端路由请求被重写到index.html
• API请求能正确转发到Node的11000端口

步骤如下：

1. 安装grunt-connect-proxy插件（用于转发API请求）：

npm install grunt-connect-proxy --save-dev

2. 修改Gruntfile中的Livereload配置：

livereload: {
  options: {
    open: true,
    middleware: function (connect, options, middleware) {
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
      // 引入代理请求处理
      var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
      
      return [
        proxy, // 优先处理API代理
        // 修改重写规则：所有非静态文件请求直接返回index.html
        require('connect-modrewrite')(['!(\..+)$ /index.html [L]']),
        connect.static('.tmp'),
        connect().use('/bower_components', connect.static('./bower_components')),
        connect().use('/app/styles', connect.static('./app/styles')),
        // 托管构建后的静态文件
        ...optBase.map(path => connect.static(path)),
        connect.static(appConfig.app)
      ];
    }
  },
  // 配置API代理规则，根据你的实际API前缀调整
  proxies: [
    {
      context: '/api', // 假设你的API接口都以/api开头
      host: 'localhost',
      port: 11000,
      https: false,
      changeOrigin: false
    }
  ]
}

3. 在Grunt的任务注册中，确保先执行代理配置任务，再启动Livereload：

grunt.registerTask('serve', [
  'configureProxies:livereload', // 先配置代理
  'livereload'
]);

这样部署后启动Grunt服务，刷新前端路由时，Grunt会直接返回index.html，API请求则转发到Node的11000端口。

如果你的部署环境用了Nginx作为反向代理（比如把域名请求转发到Grunt或Node端口），可以在Nginx配置中添加重写规则，自动处理HTML5模式的路由。

示例Nginx配置：

server {
    listen 80;
    server_name your-server-ip;

    # 处理前端静态文件和路由
    location / {
        root /path/to/your/angular/dist; # 指向Angular构建后的静态文件目录
        try_files $uri $uri/ /index.html; # 先找静态文件，找不到就返回index.html
    }

    # 转发API请求到Node的11000端口
    location /api {
        proxy_pass http://localhost:11000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

配置完成后重启Nginx，所有请求都会经过Nginx处理，刷新路由时自动返回index.html。

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