MEAN栈（Angular 6+Express）刷新页面出现Cannot GET错误求助

这个问题我太熟悉了！本质是Angular的前端路由和Express的后端路由工作逻辑差异导致的：

Angular是单页应用（SPA），平时通过页面内链接跳转时，路由切换完全在浏览器端完成，不会向服务器发请求；但当你刷新页面、直接在地址栏输入路径时，浏览器会直接向Express服务器发起对应路径的GET请求，而你的Express服务器根本没有配置这些前端路由的处理规则，所以就返回了「Cannot GET」错误。

解决方案：给Express添加Fallback路由 #

核心思路是：让Express先处理所有API请求和静态资源，当找不到对应路由时，返回Angular的主页面index.html，把路由控制权交还给Angular。

步骤1：调整Express路由顺序

Express的路由匹配是从上到下的，所以一定要把API路由放在最前面，然后是静态资源配置，最后是Fallback路由。

示例代码：

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

// 1. 先配置所有API路由（你的业务接口）
app.use('/api/auth', require('./routes/auth'));
app.use('/api/users', require('./routes/users'));
// ... 其他你的API路由都放在这里

// 2. 配置静态资源（Angular构建后的文件）
app.use(express.static(path.join(__dirname, 'public')));

// 3. 添加Fallback路由：所有非API、非静态资源的请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

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

关键注意事项

• 确认静态资源路径正确：Angular执行ng build后，默认会把构建产物放在dist/你的项目名目录下，如果你把这些文件放到了Express的public目录，那路径没问题；如果直接用dist目录，要改成path.join(__dirname, 'dist', 'your-project-name')。
• Fallback路由必须放在最后：如果把它放在API路由前面，会导致所有API请求都被拦截返回index.html，这就坏了！
• 无需修改Angular路由配置：你的Angular路由定义是正常的，默认的PathLocationStrategy（不带#的URL）完全可以和这个方案配合，不用改成哈希路由。

原理说明 #

当用户刷新页面或直接输入路径时，服务器返回Angular的主页面，Angular加载完成后会读取当前URL的路径，然后根据你在app.module.ts中定义的路由规则，渲染对应的组件，和正常的页面内跳转效果完全一致。

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