如何在 Express static 获取后请求额外的 GET 方法？

Question

我正在使用 node express 构建我的服务器和客户端。

我首先要我的 HTML 文件（由快递 static 自动完成），然后是 JSON 文件，这样 JSON 数据就会很好地显示在我的 html 文件上。

这是我的文件结构

- index.js
- public
 |
  - index.html
 |
  - front-end.js

索引.js

const express = require('express');
const app = express();
const names = {...}

app.use(express.static('./public'));

app.get('/', (req, res) => {
  return res.json({names});
})

前端.js

axios.get('/')
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err);
  })

index.html

<html>
...
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="front-end.js"></script>
</html>

但是 JSON 数据传输部分不工作。 我在res中唯一可以获得的axios是 index.html 文件。 它是通过static快递在内部完成的。 我查看了有关 express static 选项的文档，但尚未找到任何线索。

离开express.static部分时，我还有其他方法可以做吗？ 或者我需要更换零件吗？

Answer 1

客户端（如浏览器）发出 HTTP 请求。 然后它会收到 HTTP 响应。 单个HTTP 响应。 您不能对单个请求发送多个响应。

在这种情况下，浏览器发出对/的请求，Express 依次检查每个路由，直到找到匹配项。 由于您在针对/配置了static的目录中有一个index.html文件，因此它服务于此并且永远不会到达app.get('/' 。

也就是说，我不知道您期望单个 URL 提供 HTML 文档和 JSON 文本的行为是什么。 它们本质上是非常不同的事物，以非常不同的方式处理。

也许您想使 JSON 文本中的数据可供运行在 HTML 文档中的 JavaScript 使用。

在这种情况下：

给处理 JSON 的端点一个不同的路径
使用 Ajax（例如，使用您加载的 axios 库）请求 URL
使用DOM 操作将数据添加到文档

如何在 Express static 获取后请求额外的 GET 方法？

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-02-01 08:20:00

如何在 Express static 获取后请求额外的 GET 方法？

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-02-01 08:20:00

解决方案1
1 已采纳 2023-02-01 08:20:00