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 地址后可以直接进行访问。