乐趣区

关于node.js:前后端开发中简易设置个性化的Web代理服务器

jiezi

应用 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…

退出移动版