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

简介: Node.js 项目开发调试时前端项目时通常需要提供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.

相关文章
|
1月前
|
缓存 监控 定位技术
|
8天前
|
存储 人工智能 自然语言处理
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
ChatMCP 是一款基于模型上下文协议(MCP)的 AI 聊天客户端,支持多语言和自动化安装。它能够与多种大型语言模型(LLM)如 OpenAI、Claude 和 OLLama 等进行交互,具备自动化安装 MCP 服务器、SSE 传输支持、自动选择服务器、聊天记录管理等功能。
72 15
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
173 45
|
17天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
23天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
27 7
|
28天前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
27天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
36 2
|
1月前
|
安全 开发工具 Swift
Swift 是苹果公司开发的现代编程语言,具备高效、安全、简洁的特点,支持类型推断、闭包、泛型等特性,广泛应用于苹果各平台及服务器端开发
Swift 是苹果公司开发的现代编程语言,具备高效、安全、简洁的特点,支持类型推断、闭包、泛型等特性,广泛应用于苹果各平台及服务器端开发。基础语法涵盖变量、常量、数据类型、运算符、控制流等,高级特性包括函数、闭包、类、结构体、协议和泛型。
29 2
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
46 3
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
52 1
下一篇
DataWorks