前后端开发中简易设置个性化的Web代理服务器

使用 live-server

Node.js 项目开发调试时前端项目时通常需要提供web服务器,才能实现一些页面的功能调试。
因为如果通过file://协议访问html或js时,与相比 http://协议安全方面差别较大,file://访问文件时无法传递http协议头之类的东西,所以搭建web服务器成为了必须选项。

很多ide自动提供了这样的功能,如HBuilder. 自己搭建静态的web服务器也很容易,live-server这个node.js开发的软件就很好用。

live-server安装使用都很简单:
安装:

npm install -g live-server 

使用:

live-server --port=9090

可以指定绑定的ip和端口号,也可以指定证书来配置对 https 协议的支持。live-server 能够自动监控文件变动从而自己重新加载页面,对前端开发来说非常方便。

搭建静态 Web 服务器

但也有一些情况下需要进行一些客户化设定,比如前后端分离项目,需要访问后端接口时,需要进行跨域的配置,如果使用代理方式的话,就可更加灵活的方式,而不必修改后端代码(因为这些修改常常是在正式发布后是不需要的,因为生产环境可能由网关完成跨域配置,或是同域的根本不需要跨域配置)。

这时自己能过简单的js文件完成一个代理的 web 服务器便很方便。

搭建一个可以访问静态文件的web服务器大体只需要以下的代码:

"use strict";

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

const PORT = 3000;


const args = process.argv
let staticBasePath = '../dist';
if(args.length>2)
   staticBasePath = args[2];


const staticServe = function(req, res) {
    const resolvedBase = path.resolve(staticBasePath);
    const safeSuffix = path.normalize(req.url).replace(/^(\.\.[\/\\])+/, '');
    const fileLoc = path.join(resolvedBase, safeSuffix);

    let pathname = url.parse(req.url).pathname;
    
    //根据url得到文件路径,读取文件并返回给客户端
    
    fs.readFile(fileLoc, function(err, data) {
        if (err) {
            res.writeHead(404, 'Not Found');
            res.write('404: File Not Found!');
            return res.end();
        }
        
        res.statusCode = 200;
        res.write(data);
        return res.end();
    });
};

const httpServer = http.createServer(staticServe);

httpServer.listen(PORT);

fs, http, path, url都是node.js自带的模块,在以上简单的情况下,不需要安装额外的模块即可实现对js,html,css,图片的静态文件的访问。

搭建支持后端接口的代理服务器

当需要同时访问静态文件和后端接口时,可以增加对http-proxy的支持,只需要在上面代码的基础上增加少量代码如下:

"use strict";

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

const PORT = 3000;

//npm install http-proxy --save-dev
// 用来代理部分请求到java
const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer({
     //后端服务的接口地址
    target: 'http://localhost:8080/',  
});

proxy.on('error', function(err, req, res){
    res.writeHead(500, {
        'content-type': 'text/plain'
    });
    console.log(err);
    res.end('Something went wrong. And we are reporting a custom error message.');
});


const args = process.argv
let staticBasePath = '../dist';
if(args.length>2)
   staticBasePath = args[2];


const staticServe = function(req, res) {
    const resolvedBase = path.resolve(staticBasePath);
    const safeSuffix = path.normalize(req.url).replace(/^(\.\.[\/\\])+/, '');
    const fileLoc = path.join(resolvedBase, safeSuffix);

    let pathname = url.parse(req.url).pathname;
    
    //判断如果是接口访问,则通过proxy转发
    //这里假设前端访问后端接口是通过 /gaming/xxx 来实现路由区分
    if(pathname.indexOf("gaming") > 0){
        proxy.web(req, res);
        return;
    }


    fs.readFile(fileLoc, function(err, data) {
        if (err) {
            res.writeHead(404, 'Not Found');
            res.write('404: File Not Found!');
            return res.end();
        }

        res.statusCode = 200;

        res.write(data);
        return res.end();
    });
};

const httpServer = http.createServer(staticServe);

httpServer.listen(PORT);

Mime 类型的使用示例

如果需要对特殊文件的支持,如 WebAssembly, 扩展名是.wasm,则需要在返回的Content-Type上做一下处理,即:

var mime = require('mime')

fs.readFile(fileLoc, function(err, data) {
        if (err) {
            res.writeHead(404, 'Not Found');
            res.write('404: File Not Found!');
            return res.end();
        }

        let extension = path.extname(fileLoc);

        let type =  mime.getType(fileLoc);

        if(type) {
            res.setHeader('Content-Type',type);
        }else if(extension=='.wasm'){
            res.setHeader('content-type', "application/wasm");
        }

        res.statusCode = 200;

        res.write(data);
        return res.end();
    });

这是因为前端加载 WebAssembly 里,浏览器要求必须按application/wasm 返回 content-type.

参考链接:

https://stackabuse.com/node-h...

[链接]

12.6k 声望
4.7k 粉丝
0 条评论
推荐阅读
从原生 JavaScript 到 React
React 是一个用于构建用户界面的 JavaScript 框架。它可用于通过动态操作页面内容来创建 JavaScript 应用程序。浏览器已经提供了在页面中创建元素的 API,即 DOM,所以新手可能想知道 React 带来了什么以及它与 D...

Yujiaao7阅读 3.8k

反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...

TANKING13阅读 10k评论 7

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 3.8k评论 1

封面图
Just for fun——C#应用和Nodejs通讯
进程通信常见的进程通讯的方法有:管道(Pipe)命名管道信号消息队列其他管道是比较简单基础的技术了,所以看看它。Node IPC支持Node官方文档中Net模块写着:IPC SupportThe net module supports IPC with named ...

pigLoveRabbit3阅读 6.8k评论 2

「过程详解」async await综合题
如果你之前跟我一样一直对async await熟悉又陌生的话(熟悉是可能每天都在用,陌生是针对一些组合题又丈二和尚摸不着头脑),不妨可以边看边练,总结规律,相信会逐渐清晰并有所得。本文对每个案例都详细描述了代...

wuwhs5阅读 1.2k

封面图
cligetter|一款快速生成 Cli工具 开发模版的脚手架
近年来 cli工具 的开发,对于不断发展的前端生态来说,似乎也逐渐成为工程师们的必备技能。其实开发一个 cli工具 并不难,但对于前端的同学可能存在一点认知上的小门槛,特别是对于刚开始接触 cli 脚手架工具开发...

木木剑光3阅读 655

一个灵活的 Node.js 多功能爬虫库 —— x-crawl
x-crawl · x-crawl 是一个灵活的 Node.js 多功能爬虫库。灵活的使用方式和众多的功能可以帮助您快速、安全、稳定地爬取页面、接口以及文件。如果你也喜欢 x-crawl ,可以给 x-crawl 存储库 点个 star 支持一下,...

coderhxl2阅读 1.9k评论 2

封面图

[链接]

12.6k 声望
4.7k 粉丝
宣传栏