引言

纯前端开发的时候，很多业务场景需要搭建本地服务器，方便页面浏览。 简单列举几个好处，比如

局域网内多终端访问 配合外网映射 解决接口跨域问题

我常用到的几种本地搭建服务器的方式，比如

npm的

全局安装，serve ./启动，方便好用。 直接启动的话不支持跨域。

webpack-dev-server

一般使用在基于wepack的项目，普通H5搭建需要成本。 支持跨域。

node-proxy-server

适用于普通页面开发，配置简单，node 命令启动。 支持跨域。

node-proxy-server 原理

配置

配置接口地址的拦截，以及代理接口的地址。

let conifg = {
          
   
    /xxxx1: {
          
    // 需要拦截的本地请求路径
        target: http://xxxxxxxx.com, // 代理地址
        port: 80, // 端口，默认80，某些地址可能是8080
    },
    /xxxx2: {
          
    
        target: http://xxxxxxxx.com, 
        port: 80,
    }
    // ...other path
};

中间代理服务器

主要利用nodejs的 http 和 fs模块，创建一个中间服务器，接受页面请求，再通过中间服务器去请求真实接口，返回数据。

let http = require(http);
let fs = require(fs);
// 创建中间代理层http服务
let app = http.createServer(function (request, response) {
          
   
	// 主要逻辑：
	// 1.拦截请求配置的路径 if(hasProxy(url, request, response))
	// 2.普通请求，直接通过
});

普通资源请求

非拦截请求，直接通过。

// 普通请求和资源加载
fs.readFile(__dirname + url, function (err, data) {
          
   
    if (err) {
          
   
        console.log(请求失败, err);
    } else {
          
   
        response.end(data);
    }
});

源码

，欢迎自取。