http-server的简单使用

1. http-server 简介

http-server 是前端常使用的 http 服务器，非常实用。可以用做模拟数据，可以做静态资源服务器，也可以做调试、测试的前端服务器，可以不再依赖后端，同时也可以做代理转发等功能，解决平时开发的大部分后端需求。

http-server 是基于 node.js 的 http 服务器，它最大的好处就是可以使任意一个目录称为服务器的目录，完全抛开后台的沉重工程，直接运行想要的 js 代码。

2. http-server 使用场景

• 在前端比较小型的项目中，若想要运行一段代码，但是又没有必要使用 tomcat 或者 Apache http server 的时候，比如运行一个简单的 html 页面，可以使用一个简单且轻量的 http-server 服务。
• 前端开发完成后，需要我们打包部署时，此时一般会生成一个 dist 文件夹，里面存放的是一些静态文件，当我们在编辑器里面直接运行这些静态文件时，很可能会出现 ”because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.“ 这类关于 MIME type 的错误，这些错误是因为静态文件访问限制导致的，此时就可以使用 http-server 来解决。

3. http-server 的安装

npm install http-server -g

4. http-server 的使用

在当前目录下的 www 下启动服务器，端口为 3000， 启动成功后打开默认浏览器，地址为：http://localhost:3000/

http-server './www/' -p 3000 -o

5. http-server 相关参数

• -p 端口号（默认8080）
• -a IP地址（默认0.0.0.0）
• -d 显示目录列表（默认 True）
• -i 显示 autoIndex（默认 True）
• -e 或者 --ext 如果没有提供默认的文件扩展名（默认 html）
• -s 或者 --silent 禁止日志信息输出
• --cors 允许跨域资源共享
• -o 启动服务后打开默认浏览器
• -c 设置缓存 cache-control max-age heade 存留时间（以秒为单位），示例：-c10 是10秒，默认是3600秒，如果要禁用缓存就使用-c-1
• -U 或者 --utc 使用UTC time 格式化 log 信息
• -p 或者--proxy 通过一个url地址，代理不能通过本地解析的资源
• -S 或者 --ssl 启用https
• -C 或者 --cert 证书文件路径（默认：cert.pem）
• -K 或者 --key ssl密匙文件路径（默认：key.pem）
• -r 或者 --robots Provide a /robots.txt
• -h 或者 --help 打印以上列表信息并退出

6. 相关的使用实例

页面下的关键代码：

function get(url, callback) {
	var oReq = new XMLHttpRequest()
	// 当请求加载成功之后要调用指定的函数
	oReq.onload = function() {
		callback(oReq.responseText)
	}
	oReq.open("get", url, true)
	oReq.send()
}
get('data.json', function(data) {
	console.log(data);
})

注意以上相关的代码嵌套在script标签中，其是一个简单的html页面，直接运行该html页面时：
查看相关的Network显示如下：

同时输入如下报错信息：

发生跨域错误，此时我们可以通过简单轻量的 http-server 服务进行解决。

通过终端进入到相关的项目文件中，然后在终端输入：

http-server -o

启动了相关的服务后再次进入到相关 html 页面后，发现以上的问题进行了解决。

该问题为什么能够得以进行解决呢？
那是因为进入到这个相关的项目文件目录时，启用 http-server 后，其将该项目目录放置到 http-server 服务上，即让其变为服务器的目录，通过输入相关的 url 地址后可以直接进行访问。