使用Node.js快速搭建简单的静态文件服务器
做前端有时会采用一些复杂框架，在文件系统中直接打开页面（用file:///方式打开），往往会报跨域的错，类似于“XMLHttpRequest cannot load ...(文件名). Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.”。这时，我们可以快速搭建一个简单的静态文件服务器，用Node.js最合适。
看过龍太的文章后（地址：http://www.jianshu.com/p/76c1a9f39a36），我觉得这篇文章里的服务器实现还是“麻雀虽小，五脏俱全”的。不过代码有Bug，比如当用户请求一个目录时，代码虽然可以自动搜索目录里的index.html，但在显示过程中出现异常。经过研究和修改，我把原文章中的3个js脚本合为一个，并解决了这个问题。而且优化了体验，比如当运行这个js文件时，载入项目主页的浏览器会自动弹出来。
1.在前端项目根目录下创建server.js，代码如下：
"use strict";
//加载所需要的模块
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var cp = require('child_process'); //创建服务
var httpServer = http.createServer(processRequest); var port = 8080; //指定一个监听的接口
httpServer.listen(port, function() {
console.log(`app is running at port:${port}`);
console.log(`url: http://localhost:${port}`);
cp.exec(`explorer http://localhost:${port}`, function () {
});
}); //响应请求的函数
function processRequest (request, response) {
//mime类型
var mime = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml"
}; //request里面切出标识符字符串
var requestUrl = request.url;
//url模块的parse方法 接受一个字符串，返回一个url对象,切出来路径
var pathName = url.parse(requestUrl).pathname; //对路径解码，防止中文乱码
var pathName = decodeURI(pathName); //解决301重定向问题，如果pathname没以/结尾，并且没有扩展名
if (!pathName.endsWith('/') && path.extname(pathName) === '') {
pathName += '/';
var redirect = "http://" + request.headers.host + pathName;
response.writeHead(301, {
location: redirect
});
//response.end方法用来回应完成后关闭本次对话，也可以写入HTTP回应的具体内容。
response.end();
} //获取资源文件的绝对路径
var filePath = path.resolve(__dirname + pathName);
console.log(filePath);
//获取对应文件的文档类型
//我们通过path.extname来获取文件的后缀名。由于extname返回值包含”.”，所以通过slice方法来剔除掉”.”，
//对于没有后缀名的文件，我们一律认为是unknown。
var ext = path.extname(pathName);
ext = ext ? ext.slice(1) : 'unknown'; //未知的类型一律用"text/plain"类型
var contentType = mime[ext] || "text/plain"; fs.stat(filePath, (err, stats) => {
if (err) {
response.writeHead(404, { "content-type": "text/html" });
response.end("<h1>404 Not Found</h1>");
}
//没出错 并且文件存在
if (!err && stats.isFile()) {
readFile(filePath, contentType);
}
//如果路径是目录
if (!err && stats.isDirectory()) {
var html = "<head><meta charset = 'utf-8'/></head><body><ul>";
//读取该路径下文件
fs.readdir(filePath, (err, files) => {
if (err) {
console.log("读取路径失败！");
} else {
//做成一个链接表，方便用户访问
var flag = false;
for (var file of files) {
//如果在目录下找到index.html，直接读取这个文件
if (file === "index.html") {
readFile(filePath + (filePath[filePath.length-1]=='/' ? '' : '/') + 'index.html', "text/html");
flag = true;
break;
};
html += `<li><a href='${file}'>${file}</a></li>`;
}
if(!flag) {
html += '</ul></body>';
response.writeHead(200, { "content-type": "text/html" });
response.end(html);
}
}
});
} //读取文件的函数
function readFile(filePath, contentType){
response.writeHead(200, { "content-type": contentType });
//建立流对象，读文件
var stream = fs.createReadStream(filePath);
//错误处理
stream.on('error', function() {
response.writeHead(500, { "content-type": contentType });
response.end("<h1>500 Server Error</h1>");
});
//读取文件
stream.pipe(response);
}
});
}
2.在前端项目根目录下打开命令提示符或终端，输入以下命令就可以启动小服务器啦。
node server.js
使用Node.js快速搭建简单的静态文件服务器的更多相关文章
- Node.js Web 开发框架大全《静态文件服务器篇》
这篇文章与大家分享优秀的 Node.js 静态服务器模块.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能 ...
- 使用Node.js快速搭建WebSocket server
原文地址:http://my.oschina.net/yushulx/blog/309413 目录[-] 安装 服务端 客户端 参考 安装 ? 1 npm install ws 服务端 server. ...
- Node.js 环境搭建及简单应用
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...
- Node.js学习笔记（1）：Node.js快速开始
Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...
- paip.最好的脚本语言node js 环境搭建连接mysql
paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world .js 2 #---------模 ...
- 拿nodejs快速搭建简单Oauth认证和restful API server攻略
拿nodejs快速搭建简单Oauth认证和restful API server攻略:http://blog.csdn.net/zhaoweitco/article/details/21708955 最 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- 使用Django快速搭建简单的数据管理后台
使用Django快速搭建简单的数据管理后台 概述 需求描述: 数据表已建好,能可视化操作增删改查,避免直接操作数据库 简版的管理系统 环境 Windows 10 x64 Python 3.6.3 (A ...
- 用Node.JS+MongoDB搭建个人博客（页面模板）（五）（结束）
<差不多先生> 我是差不多先生,我的差不多是天生.也代表我很天真,也代表我是个闲人.这差不多的人生,总是见缝插针. 求学的道路上总是孤独的,即使别人不理解我,认为我是奇葩!但没关系,我会坚 ...
随机推荐
- Unable to instantiate application com.android.tools.fd.runtime.BootstrapApplication 解决办法
相信很多人都遇到过这个问题,用Android Studio正在运行程序的时候,突然不知道什么原因,报一个找不到application或者找不到activity的错误(java.lang.ClassNo ...
- MySQL的system命令在渗透测试中的使用以及UDF提权
声明:下面引用关于SYSTEM的东西是自己之前的内容,是自己没有研究透导致的错误结论:有了错就要改,做技术的不能弄虚作假,时时刻刻要求自己要谨慎,虽然我的博客没人看,但是也要向所有已经看到的人道歉,错 ...
- idea下maven项目增加依赖项目里面没有添加相关依赖jar
困扰了一晚上的问题,一般在pom.xml中增加了相关依赖,idea会自动将依赖的Jar包增加到maven项目中,但是在pom.xml中增加了依赖,项目中并没有 偶然打开idea的侧边栏maven工具栏 ...
- JsBridge的异步不执行的处理--promise异步变同步
Hybird App:H5内嵌APP,前端用vue,APP之间的交互处理,适配安卓ios, 为了降低开发成本,减少前端适配工作量,三端统一使用 WebViewJavascriptBridge 在进行 ...
- 160503、onunload、onbeforeunload事件详解
最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...
- Ubuntu16.4下RStudio1.1.447 中文输入问题的解决方案
Ubuntu16.4下RStudio1.1.447 中文输入问题的解决方案参照:https://blog.csdn.net/matteoshenl/article/details/78603528 R ...
- http协议------>概述和动手实践认识Http协议
http协议是用来定义客户端和web服务器通讯格式 浏览器与服务器的交互过程 是tcp/ip的应用层 版本:http/1.0(客户端和web服务器建立连接后只能访问一个web资源) http/1. ...
- poj3233—Matrix Power Series
题目链接:http://poj.org/problem?id=3233 题目意思:给一个矩阵n*n的矩阵A和一个k,求一个式子 S = A + A2 + A3 + … + Ak. 这个需要用到等比数列 ...
- TFS中工作项的定制-修改面板
上一篇文章我们讲到了<TFS 中工作项的订制-修改工作流>,工作流只要我们设计出来,就可以进行定制修改了.这次通过简单的案例,了解一下,工作项的面板如何定制. 1.软件准备 ...
- where both the key and the value are strings
Environment Variables (The Java™ Tutorials > Essential Classes > The Platform Environment) htt ...