浏览器发出的请求，后端到底收到了什么？

全栈转型计划 · 第1周 / Day 1

你平时在前端写：

ts📋 复制
fetch('/api/tasks');

今天先不急着用Express。我们直接使用Node.js原生能力接住这个请求，看清后端最基础的三件事：

• 客户端请求了什么地址
• 使用了什么HTTP方法
• 服务端如何决定返回什么结果

今天的目标

创建一个Node.js服务，实现：

http📋 复制
GET /api/health

正常响应：

json📋 复制
{
  "ok": true,
  "service": "collab-api",
  "time": "2026-08-25T10:00:00.000Z"
}

同时处理两种异常：

• 地址不存在：返回404
• 请求方法不对：返回405

20分钟怎么分

• 3分钟：创建TypeScript项目
• 5分钟：启动HTTP服务
• 7分钟：处理路由和请求方法
• 5分钟：测试正常、404和405

第一步：创建项目

bash📋 复制
mkdir fullstack-roadmap
cd fullstack-roadmap

npm init -y
npm install -D typescript tsx @types/node

在package.json中增加：

json📋 复制
{
  "scripts": {
    "dev": "tsx watch src/server.ts"
  }
}

然后创建：

text📋 复制
src/server.ts

第二步：先完成代码骨架

先不要看完整答案，尝试补上三个位置：

ts📋 复制
import { createServer } from 'node:http';

const server = createServer((req, res) => {
  const method = req.method ?? 'GET';

  const url = new URL(
    req.url ?? '/',
    `http://${req.headers.host ?? 'localhost'}`
  );

  console.log(`${method} ${url.pathname}`);

  res.setHeader(
    'Content-Type',
    'application/json; charset=utf-8'
  );

  // 1. 判断是否为 /api/health

  // 2. 判断是否使用 GET 方法

  // 3. 返回健康检查结果

  // 其他地址返回 404
});

server.listen(3000, () => {
  console.log('Server: http://localhost:3000');
});

这里的req就是服务端收到的请求，里面包含：

ts📋 复制
req.method;
req.url;
req.headers;

res则用来设置状态码、响应头和响应正文。

完成标准

启动服务：

bash📋 复制
npm run dev

然后完成下面三个测试。

1. 正常请求

bash📋 复制
curl -i http://localhost:3000/api/health

应该看到：

http📋 复制
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

2. 不存在的地址

bash📋 复制
curl -i http://localhost:3000/api/unknown

应该返回：

http📋 复制
HTTP/1.1 404 Not Found

3. 方法不正确

bash📋 复制
curl -i \
  -X POST \
  http://localhost:3000/api/health

应该返回：

http📋 复制
HTTP/1.1 405 Method Not Allowed
Allow: GET

解决思路

ts📋 复制
import { createServer } from 'node:http';

const server = createServer((req, res) => {
  const method = req.method ?? 'GET';

  const url = new URL(
    req.url ?? '/',
    `http://${req.headers.host ?? 'localhost'}`
  );

  console.log(`${method} ${url.pathname}`);

  res.setHeader(
    'Content-Type',
    'application/json; charset=utf-8'
  );

  if (url.pathname === '/api/health') {
    if (method !== 'GET') {
      res.statusCode = 405;
      res.setHeader('Allow', 'GET');

      return res.end(
        JSON.stringify({
          error: {
            code: 'METHOD_NOT_ALLOWED',
            message: '该接口只支持GET请求'
          }
        })
      );
    }

    res.statusCode = 200;

    return res.end(
      JSON.stringify({
        ok: true,
        service: 'collab-api',
        time: new Date().toISOString()
      })
    );
  }

  res.statusCode = 404;

  return res.end(
    JSON.stringify({
      error: {
        code: 'NOT_FOUND',
        message: '接口不存在'
      }
    })
  );
});

server.listen(3000, () => {
  console.log('Server: http://localhost:3000');
});

今天真正要理解的链路

text📋 复制
curl或浏览器发出请求
→ Node.js收到req
→ 根据pathname和method判断走哪个分支
→ 设置statusCode和响应头
→ res.end()返回数据
→ 客户端收到响应

Express、FastAPI和Spring Boot帮我们简化了这套流程，但底层要解决的仍然是同一件事。

生产环境最容易踩的坑

调用res.end()后没有及时return。

例如：

ts📋 复制
if (!allowed) {
  res.statusCode = 403;
  res.end('Forbidden');
}

// 后面继续执行
res.end('Success');

同一个请求被响应两次，常见结果就是：

text📋 复制
ERR_HTTP_HEADERS_SENT

因此，一个分支已经完成响应时，要及时return res.end(...)，明确结束当前请求处理。