浅析http-server作用、FIle协议与Http协议区别及浏览器通过file://访问文件和http://访问文件的区别
问题背景：前端构建的 dist 目录的 index.html，直接点击打开，会报一个跨域问题。原因是因为es6的module语法，浏览器禁止访问本地文件。（直接打开，使用的就是 File 协议，而使用 http-server 将本机作为一台 http 服务器，就可解决此问题，使用的是 http 协议）
一、http-server作用
1、局域网访问静态页面
访问本地计算机中的文件都是基于file协议，如果要开放我们的本地文件给局域网人员访问，是不能使用file协议。得用http协议或者ftp协议。而基于http协议的http-server就是一个不错的选择
2、处理页面跨域
当页面含有跨域的请求，此时可以利用http-server，使用命令
http-server -p 8080 -P https://abc.org
//-p 本地运行端口 -P 将所有无法在本地解析的请求代理到给定的URL进行处理
3、验证前端页面是否打包正常
现在的项目很多都前后端分离的架构，前端通常会打包dist文件丢到测试或者其他环境，我们可以利用http-server来跑下打包的dist目录内容，验证打包的内容是否正确
二、前端使用http-server启本地服务
1、通过npm进行安装
npm install http-server -g
2、用法：
http-server [path] [options]
path就是你当前运行该命令下对应的某个文件夹名称
可用选项
- -p或--port要使用的端口（默认为8080）
- -a 要使用的地址（默认为0.0.0.0）
- -d显示目录列表（默认为true）
- -i显示autoIndex（默认为true）
- -g或者--gzip当启用（默认为false）时，它将./public/some-file.js.gz代替./public/some-file.js当文件的gzip压缩版本存在且请求接受gzip编码时。
- -e或者--ext如果没有提供默认文件扩展名（默认为html）
- -s或者--silent从输出中抑制日志消息
- --cors通过Access-Control-Allow-Origin标头启用CORS
- -o 启动服务器后打开浏览器窗口
- -c设置缓存控制max-age标头的缓存时间（以秒为单位），例如-c1010秒（默认为3600）。要禁用缓存，请使用-c-1。
- -U或--utc在日志消息中使用UTC时间格式。
- -P或者将--proxy所有无法在本地解析的请求代理到给定的URL。例如：-P http://someurl.com
- -S或--ssl启用https。
- -C或--certssl cert文件的路径（默认值:) cert.pem。
- -K或--keyssl密钥文件的路径（默认值:) key.pem。
- -r或--robots提供/robots.txt（其内容默认为User-agent: *nDisallow: /）
- -h或--help打印此列表并退出。
3、实际使用：进入目标文件夹，输入 hs 或者 http-server 命令，不过推荐使用如下命令
http-server -c-1
只输入 http-server 的话，更新了代码后，页面不会同步更新。
三、FIle协议与Http协议及区别
1、背景：先看三段代码
// index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./index.js" async></script>
</body>
</html>
// index.js:
import * as circle from './test';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
// test.js:
export function area(radius = 5) {
return Math.PI * radius * radius;
}
export function circumference(radius = 5) {
return 2 * Math.PI * radius;
}
使用的是es6的module语法，但是通过file:///E:/PHP/node_test/fileAndHttp/index.html进行打开时浏览器会报一个关于CORS跨域的错误，网上查找的说是浏览器禁止访问本地文件。
2、检查思路
（1）浏览器版本过低，不支持es6语法。于是升级浏览器至最新（Chrome）,但是问题依旧没有解决。
（2）本地不支持module模块，通过：
（3）通过bable将ES6语法转化成ES5语法，浏览器依旧报CORS跨域问题。
（4）在外网一段回答中提到http和file，于是思考可能是协议使用错误。最后通过localhost本地服务器进行访问文件，报错消失。
3、什么是File协议
字面意思：本地文件传输协议
什么是File：file协议主要用于访问本地计算机中的文件，好比通过Windows的资源管理器中打开文件或者通过右键单击‘打开’一样。
如何使用？file协议的基本格式如下：file:///文件路径
比如需要打开E盘下txt目录中的index.txt，那么在资源管理器或者浏览器地址栏中输入：file:///E:/txt/index.txt。用file:///+文件地址，其实等价于文件的地址。即：
等价于：
C:/Users/123.jpg
4、URI中问什么本地文件file后面跟三个斜杠？
URI的结构为：
如果有host，前面需要加//，因此对于http或https等网络地址来说会写成：https://blog.csdn.net/category/7191777
因为如果没有host的话，第一个[]的内容就不存在了，这种统一的写法有一个标准叫CURIE。
5、什么是http协议
简介：http协议是Hyper Text Transfer Protocol，即超文本传输协议的缩写。是用来从万维网服务器传输超文本到本地浏览器的传送协议，基于TCP/IP通信协议来传输数据。http协议工作于客户端-服务器架构上，浏览器作为http客户端通过url向http服务器端发送请求，服务器接收到请求后，向客户端发送请求。
6、浏览器通过file://访问文件和http://访问文件的区别
file协议用于访问本地计算机中的文件，好比通过资源管理器中打开文件一样，需要主要的是它是针对本地的，即file协议是访问你本机的文件资源。
http访问本地的html文件，相当于将本机作为了一台http服务器，然后通过localhost访问的是你自己电脑上的本地服务器，再通过http服务器去访问你本机的文件资源。
再简单点就是file只是简单请求了本地文件，将其作为一个服务器未解析的静态文件打开。而http是在本地搭建了一个服务器再通过服务器去动态解析拿到文件。
其他区别：
file协议只能在本地访问
本地搭建http服务器开放端口后他人也可以通过http访问到你电脑中的文件，但是file协议做不到
file协议对应有一个类似http的远程访问，就是ftp协议，即文件传输协议。
file协议无法实现跨域
7、问题解决
开始通过file协议直接访问index.html，在index.html中静态引入index.js，在index.js中import test.js。在import的过程中需要http服务器去解析es6语法并添加header头信息去跨域引入test.js，但是file协议相当于通过资源管理器静态访问index.html，中间的过程没有http服务器参与解析，所以无法识别es6的import语法。
浙公网安备 33010602011771号