Node/Express 中的 BrowserHistory 和 API

Posted 2023-02-21

【中文标题】Node/Express 中的 BrowserHistory 和 API

【英文标题】：BrowserHistory in Node/Express with API

【发布时间】：2016-06-14 16:24:41

【问题描述】：

我正在尝试为使用 react-router 的 React 应用程序实现 BrowserHistory。基于the documentation，我在我的index.js：

let express = require('express');
let harp = require('harp');
let path = require('path');

let app = express();

app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));

// BrowserHistory code
app.get('*', function (request, response)
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
);

let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );

// ...
// Various app.get(...) endpoints below
// ...

但是，这现在捕获所有 API 请求（例如，我想向 /metric 发出 GET 请求）并返回 index.html 而不是正确的 JSON 数据。

如何实现 BrowserHistory 并拥有 API 端点？

【问题讨论】：

您需要在app.get(...) 之后为端点定义app.get('*', ...)。

@TimurBilalov 谢谢！我没有意识到顺序很重要 - 很高兴接受上述答案。

【参考方案1】：

您需要在app.get(...) 之后为端点定义app.get('*', ...)。

如果你看一下docs about "middleware"，你会发现快递应用看起来像一个分层蛋糕，每一层都负责某事。每个请求传递都会抛出所有层。层可以执行一些代码，修改req，res，也可以调用next()层。

app.get('*', ...) 处理所有请求并且不调用next()，所以如果你在其他中间件之前定义它，它们将不会被执行。