javascript - 着陆页不断返回 express 中的静态文件

Question

我试图在我的项目中使用静态文件，但是当用户向我的“/”登陆页面发出获取请求时。我想发送非静态的东西，比如 json。但出于某种原因，它只是自动将我的 index.html 发送到我的静态文件中。

const express = require("express");
const app = express();

app.use(express.static("public"));

app.get("/", (req, res) => {   //This sends the user to the index.html even tho i want to send 123
  res.send("123");
});

app.listen("3000");

Answer 1

当您编写代码时，express.static() 中间件查看 / 请求，在中找到一个 index.html 文件公共(public)目录并将其作为 / 请求的响应。这是 express.static() 的一项功能，它会导致您与 "/" 的自定义路由发生冲突。

这里至少有四种解决方案可供选择:

1. 您可以为 express.static() 指定一个选项来禁用 index.html 功能，这样它将避免 "/"路由并将控制权传递给您的后续路由处理程序。
2. 您可以在 app.get("/", ...) 路由之后移动 express.static() 中间件，以便您的自定义路由获得优先权应要求。
3. 您可以从公共(public)目录中删除 index.html 文件，这样 express.static() 就不会找到它。为所有 HTML 文件使用模板系统，将所有 HTML 模板文件定位在 express.static() 看不到的其他目录中(例如 views 目录)也会导致这种情况发生，或者只是将其移动到某个私有(private)目录并从私有(private)目录中的代码中使用它也可以。
4. 为所有静态资源提供一个公共(public)路径前缀，这样静态资源和自定义路由处理程序之间就不会发生 URL 冲突。

---

第一个选项(在 express.static() 中禁用 index.html 特性)看起来像这样:

const express = require("express");
const app = express();

// disable index.html feature
app.use(express.static("public"), {index: false});

app.get("/", (req, res) => {
  res.send("123");
});

app.listen("3000");

第二个选项(更改路由定义/中间件的顺序)如下所示:

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("123");
});

// put this after custom route definitions so they take precendence
app.use(express.static("public"));

app.listen("3000");

第四个选项(给所有静态资源一个公共(public)路径前缀)如下所示:

const express = require("express");
const app = express();

app.use(express.static("/static", "public"));

app.get("/", (req, res) => {
  res.send("123");
});

app.listen("3000");

使用这第四个选项，您必须在所有静态 URL 前加上静态前缀(您可以随意设置)，因此 "/" 永远不会匹配express.static().