做前端有时会采用一些复杂框架，在文件系统中直接打开页面（用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快速搭建简单的静态文件服务器的更多相关文章

  1. Node.js Web 开发框架大全《静态文件服务器篇》

    这篇文章与大家分享优秀的 Node.js 静态服务器模块.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能 ...

  2. 使用Node.js快速搭建WebSocket server

    原文地址:http://my.oschina.net/yushulx/blog/309413 目录[-] 安装 服务端 客户端 参考 安装 ? 1 npm install ws 服务端 server. ...

  3. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

  4. Node.js学习笔记（1）：Node.js快速开始

    Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...

  5. paip.最好的脚本语言node js 环境搭建连接mysql

    paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world   .js 2 #---------模 ...

  6. 拿nodejs快速搭建简单Oauth认证和restful API server攻略

    拿nodejs快速搭建简单Oauth认证和restful API server攻略:http://blog.csdn.net/zhaoweitco/article/details/21708955 最 ...

  7. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  8. 使用Django快速搭建简单的数据管理后台

    使用Django快速搭建简单的数据管理后台 概述 需求描述: 数据表已建好,能可视化操作增删改查,避免直接操作数据库 简版的管理系统 环境 Windows 10 x64 Python 3.6.3 (A ...

  9. 用Node.JS+MongoDB搭建个人博客（页面模板）（五）（结束）

    <差不多先生> 我是差不多先生,我的差不多是天生.也代表我很天真,也代表我是个闲人.这差不多的人生,总是见缝插针. 求学的道路上总是孤独的,即使别人不理解我,认为我是奇葩!但没关系,我会坚 ...

随机推荐

  1. 有Thread1、Thread2、Thread3、Thread4四条线程分别统计C、D、E、F四个盘的大小，所有线程都统计完毕交给Thread5线程去做汇总，应当如何实现？

    利用java.util.concurrent包下的CountDownLatch(减数器)或CyclicBarrier(循环栅栏) 转自:http://www.cnblogs.com/westward/ ...

  2. 常用MySQL函数

    MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...

  3. jQuery设置内容和属性方

    何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...

  4. js 跨域 之 修改服务器配置-XAMPP-Apache （nginx 拉到最后！）

    js高程第21章提到了ajax 跨域技术,方法有很多,如图: 我主要讲这个: 其实代码就是这样就好了,当然只兼容 IE9 及之后的版本 ,IE9 之前的版本请去原书看吧,Page 600 var xh ...

  5. 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

    HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

  6. 2017 Multi-University Training Contest - Team 2——HDU6050 Funny Function

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6050 题意:题目很短自己看吧, 就是这个递推式子,说的很清楚了,让你求F(m,1).题解里面分什么奇偶 ...

  7. Fibonacci----poj3070（矩阵快速幂， 模板）

    题目链接:http://poj.org/problem?id=3070 . 就是斐波那契的另一种表示方法是矩阵的幂: 所以是矩阵快速幂:矩阵快速幂学习 #include <cstdio> ...

  8. #define宏定义

    1 #define的概念  #define命令是C语言中的一个宏定义命令,它用来将一个标识符定义为一个字符串,该标识符被称为宏名,被定义的字符串称为替换文本.  该命令有两种格式:一种是简单的宏定义, ...

  9. Python高级特性（2）：Closures、Decorators和functools（转）

    原文:Python高级特性(2):Closures.Decorators和functools 装饰器(Decorators) 装饰器是这样一种设计模式:如果一个类希望添加其他类的一些功能,而不希望通过 ...

  10. 转：docker的核心技术深度剖析

    一.docker是什么 Docker的英文本意是码头工人,也就是搬运工,这种搬运工搬运的是集装箱(Container),集装箱里面装的可不是商品货物,而是任意类型的App,Docker把App(叫Pa ...