nodejs搭建简单易用的本地代理服务器

node-proxy-server

引言

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

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

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

npm的serve package
  • 全局安装,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.普通请求,直接通过
});

拦截请求,转发请求

根据配置中的设定的拦截路径,拦截请求,并且转发到真实地址中。

// 判断是否存在代理地址
function hasProxy(url, request, response) {
    for (const key in conifg) { // 如果存在多个拦截路径
        const { target, port } = conifg[key];
        let info = target.split('//');
        let opts = { // 请求参数
            protocol: info[0],
            host: info[1],
            port: port || 80,
            method: request.method,
            path: url,
            json: true,
            headers: {}
        }
        proxy(opts, request, response);
        return true;
    }
    return false;
}

// 代理转发
function proxy(opts, request, response) {
    // 请求真实代理接口
    var proxyRequest = http.request(opts, function (proxyResponse) {
        // 代理接口返回数据,写入本地response
        proxyResponse.on('data', function (chunk) {
            response.write(chunk, 'binary');
        });
        // 代理接口结束,通知本地response结束
        proxyResponse.on('end', function () {
            response.end();
        });
        response.writeHead(proxyResponse.statusCode, proxyResponse.headers);
    });

    // 本地接口数据传输,通知代理接口请求
    request.on('data', function (chunk) {
        proxyRequest.write(chunk, 'binary');
    });

    // 本地请求结束,通知代理接口请求结束
    request.on('end', function () {
        proxyRequest.end();
    });
}

普通资源请求

非拦截请求,直接通过。

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

源码

完整代码,欢迎自取。

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值