内置中间件与第三方中间件

点击“Run”按钮启动服务器，然后点击“+”标签页打开一个新终端。使用以下 curl 命令测试 /data 路由，并观察服务器如何处理 JSON 数据。

• 通过 POST 发送 JSON 数据： 向 /data 路由发送一个 POST 请求，并在请求体中包含一个示例 JSON 对象。

  1curl -X POST http://localhost:3000/data -H "Content-Type: application/json" -d '{"username": "alice", "age": 30}'

  预期响应：

  1{
  2  "received": {
  3    "username": "alice",
  4    "age": 30
  5  }
  6}

启用 URL 编码格式的请求体解析

1app.use(express.urlencoded({ extended: true }));

提交 URL 编码数据的 HTML 表单

1<form method="POST" action="/submit">
2  <input type="text" name="username" value="JohnDoe">
3  <input type="number" name="age" value="30">
4  <button type="submit">提交</button>
5</form>

处理 URL 编码的表单提交

1app.use(express.urlencoded({ extended: true }));
2
3app.post('/submit', (req, res) => {
4  console.log(req.body); // { username: 'JohnDoe', age: '30' }
5  res.json({ received: req.body });
6});

点击“Run”按钮启动服务器，然后点击“+”标签页打开一个新终端。使用以下 curl 命令测试 /home 路由，并观察服务器响应以及由 morgan 中间件生成的日志。

• 测试对 /home 的 GET 请求： 向 /home 路由发送一个 GET 请求，该请求将返回一条 "Hello World!" 消息。

  1curl -X GET http://localhost:3000/home

  预期响应：

  1Hello World!

  注意： 在运行服务器的终端中，你还会看到类似如下的 morgan 日志：

  1GET /home 200 4.434 ms - 12

  这表示对 /home 的 GET 请求在 4.434 毫秒内返回了 200 状态码，并发送了一个 12 字节的响应。

代码示例

1GET /home/ 200 0.832 ms - 12

点击“Run”按钮启动服务器，然后点击“+”标签页打开一个新终端。

• 测试对 /home 的 GET 请求： 使用以下 curl 命令向 /home 路由发送 GET 请求并显示响应头。

  1curl -i http://localhost:3000/home

  CORS 是由浏览器强制执行的，而不是 curl，但你可以通过这种方式检查响应头。

  预期响应： 启用 cors() 后，你会看到 Access-Control-Allow-Origin: * 响应头，表示允许跨域请求。

代码示例

1app.use(cors({ origin: 'https://example.com' })); // 限制仅允许特定来源访问

点击“Run”按钮启动服务器，然后点击“+”标签页打开一个新终端。

• 测试对 /home 的 GET 请求： 使用以下 curl 命令发送请求，并检查 Helmet 添加的安全相关响应头：

  1 curl -i http://localhost:3000/home

  预期响应头： 启用 helmet() 后，响应中将包含如下安全相关的响应头：

  1Strict-Transport-Security
  2X-Content-Type-Options
  3X-DNS-Prefetch-Control
  4X-Frame-Options

点击“Run”按钮启动服务器，然后点击“+”标签页打开一个新终端。使用以下 curl 命令测试 /submit 路由，模拟表单提交过程。表单数据将以 POST 请求形式发送。

1. 向 /submit 提交表单数据： 发送一个带有 URL 编码表单数据（username 和 age）的 POST 请求。服务器将记录解析后的请求体，并返回一个 JSON 响应对象。

   1curl -X POST http://localhost:3000/submit -H "Content-Type: application/x-www-form-urlencoded" -d "username=JohnDoe&age=30"

2. 向 /submit 提交 JSON 数据： 发送一个带有 JSON 请求体的 POST 请求。服务器将返回结构相同的响应。

   1curl -X POST http://localhost:3000/submit -H "Content-Type: application/json" -d '{"username": "JaneDoe", "age": 30}'

   两个命令的预期响应：

   1    {
   2      "received": {
   3        "username": "JohnDoe",
   4        "age": "30"
   5      }
   6    }

3. 测试对 / 的 GET 请求： 使用以下 curl 命令发送请求，并检查由 cors 和 Helmet 添加的响应头：

   1curl -i http://localhost:3000/

注意： morgan 中间件将在控制台中记录 POST 请求的详细信息（例如请求方法、状态码）。

解决方案

解决方案

按如下方式更新 server.js 文件：

解决方案：集成内置与第三方中间件

1const express = require('express');
2const morgan = require('morgan');
3const cors = require('cors');
4const helmet = require('helmet');
5
6const app = express();
7
8app.use(express.json());
9app.use(express.urlencoded({ extended: true }));
10app.use(express.static('public'));
11app.use(morgan('dev'));
12app.use(cors({ origin: 'http://localhost:3000' })); 
13app.use(helmet());
14
15app.post('/submit', (req, res) => {
16  console.log(req.body);
17  res.json({ received: req.body });
18});
19
20app.listen(3000, () => console.log('Server is running on port 3000'));

说明：

• 第 8–9 行： 解析传入的数据。

  • express.json() 用于解析 JSON 格式的请求体。
  • express.urlencoded({ extended: true }) 用于解析 URL 编码格式的表单数据。

• 第 10 行： 从 public 目录提供静态文件。该目录中的任何文件都可以通过 http://localhost:3000/<filename> 直接访问。

• 第 11–13 行： 处理日志和安全性：

  • morgan('dev') 记录 HTTP 请求详情，便于调试。
  • cors({ origin: 'http://localhost:3000' }) 仅允许来自 http://localhost:3000 的跨源请求。
  • helmet() 通过设置安全相关的 HTTP 响应头来增强应用安全性。

• 第 15–18 行： 路由处理器可同时接收 JSON 和 URL 编码格式的请求体，并返回接收到的数据以确认解析正确。