Angular SSR中浏览器与Express.js服务器通信问题求助

问题原因 #

你遇到的NG04002错误，本质是请求被Angular前端路由接管了，而非到达你定义的Express API路由。这是因为在server.ts中，Angular Universal的通配路由（app.get('*', ...)）定义在你的自定义API路由之前，Express会按路由定义顺序匹配请求，先进入Angular Router逻辑，找不到对应路由就抛出错误。

另外，默认Express不会自动解析JSON请求体，即使请求到达了/test路由，req.body也会是undefined，这也是需要修复的点。

解决方案 #

1. 调整路由定义顺序 #

在server.ts中，将自定义的API路由放在Angular Universal的通配路由之前：

// 先定义API路由
server.post('/test', (req, res, next) => {
    console.log('The Body of the Request: ', req.body);
    res.send("Got the request!");
});

// 再定义Angular Universal的通配路由
server.get('*', (req, res) => {
    res.render(indexHtml, {
        req,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
    });
});

2. 添加请求体解析中间件 #

在server.ts中，创建server实例后立即添加express.json()中间件，用于解析JSON格式的请求体：

import express from 'express';

const server = express();

// 添加JSON解析中间件
server.use(express.json());

// 之后再定义你的API路由和Angular路由...

3. 优化浏览器端请求路径 #

浏览器端调用时，建议使用相对路径，避免硬编码域名，同时规避潜在跨域问题：

readonly #http = inject(HttpClient);

testEndpoint() {
    // 使用相对路径
    this.#http.post('/test', {hello: 'world'}).subscribe(console.log);
}

验证步骤 #

1. 重启Express服务器，确保修改后的server.ts生效；
2. 在浏览器环境触发请求后，查看服务器控制台是否打印出请求体；
3. 检查浏览器控制台是否收到"Got the request!"的响应。

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