使用Node.js搭建一个临时HTTP服务

5分钟搞定！用Node.js搭建临时HTTP服务的三种姿势

大家好，我是33blog的技术博主。今天想和大家分享一个前端开发中经常会遇到的场景——需要快速起一个本地HTTP服务来测试静态页面。以前我总是傻傻地去配置Apache或Nginx，直到发现了Node.js这个神器…

为什么需要临时HTTP服务？

记得上周我在调试一个前端项目时，直接用浏览器打开本地HTML文件，结果发现Ajax请求全部失败了。这是因为浏览器出于安全考虑，限制了file://协议下的跨域请求。这时候就需要一个本地HTTP服务来模拟真实环境。

下面这三种方法，是我在实际工作中最常用的方案，各有优缺点，大家可以根据需求选择。

方案一：http-server模块（懒人首选）

这是我最推荐给新手的方式，安装简单到令人发指：

npm install -g http-server
cd your-project-folder
http-server -p 8080

只需要3行命令，一个支持热更新的HTTP服务就跑起来了。默认还会自动打开浏览器，简直不要太贴心！我经常在给产品经理演示静态原型时用这个。

小技巧：加上-c-1参数可以禁用缓存，调试的时候特别有用。

方案二：原生http模块（适合学习）

如果你想了解底层原理，可以试试Node.js自带的http模块。下面是我常用的一个简易版本：

const http = require('http');
const fs = require('fs');
const path = require('path');

http.createServer((req, res) => {
  let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
  
  fs.readFile(filePath, (err, data) => {
    if(err) {
      res.writeHead(404);
      return res.end('File not found');
    }
    
    res.writeHead(200);
    res.end(data);
  });
}).listen(3000);

console.log('Server running at http://localhost:3000/');

这个方案虽然简陋，但胜在可以完全自定义。我曾经用它快速搭建过一个内部使用的文件预览服务，根据URL参数动态返回不同的内容。

方案三：Express（功能最全）

当项目稍微复杂点时，我会选择Express。虽然要多装几个依赖，但灵活性大大提高：

npm install express

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

// 静态文件服务
app.use(express.static('public'));

// 自定义路由
app.get('/api', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Express server started');
});

Express的强大之处在于中间件机制。比如我经常配合connect-livereload实现自动刷新，开发效率直接起飞！