HTML文件直接在浏览器打开和本地服务器localhost打开有什么区别

- 日理万妓 2022-04-24 01:38 372阅读 0赞

最直接的区别，很容易注意到，一个是file协议，另一个是http协议。

file协议更多的是将该请求视为一个本地资源访问请求，和你使用资源管理器打开是一样的，是纯粹的请求本地文件。

http请求方式则是通过假架设一个web服务器，解析http协议的请求然后向浏览器返回资源信息。我们所开发的html文件最后必定是会以网页的形式部署在服务器上，通过http协议访问，所以我们开发中也尽可能模拟线上环境，架设本地服务器，来避免file协议与http协议实现过程中的某些差异，如某些API的差异、跨域请求的差异等。举个最容易验证的例子：在页面引入一张绝对路径的图片，即’/image/example.png’，然后分别通过这两种方式打开页面，file协议会将资源请求到根路径，而http协议虽然也会请求到根路径，但是是相对本地架设的服务器的根路径，一般也就是项目文件夹的路径。

访问服务器上的html文件是以http的协议方式去打开，有网络交互。

直接打开html文件是以file协议的方式去打开，没有网络交互。

浏览器对两种协议的处理有时会不同，譬如某些网页中直接调用file协议来打开图片，这样的功能会被浏览器的安全设置阻挡。因为默认上，html是运行于客户端的超文本语言，从安全性上来讲，服务端不能对客户端进行本地操作。即使有一些象cookie这类的本地操作，也是需要进行安全级别设置的。

参考文章：  
[https://blog.csdn.net/yingzi10101118/article/details/83622729][https_blog.csdn.net_yingzi10101118_article_details_83622729]  
[https://m.imooc.com/wenda/detail/382131][https_m.imooc.com_wenda_detail_382131]  
[https://zhidao.baidu.com/question/319613212.html][https_zhidao.baidu.com_question_319613212.html]

开启本地服务器实例：[https://threejs.org/docs/index.html\#manual/zh/introduction/How-to-run-things-locally][https_threejs.org_docs_index.html_manual_zh_introduction_How-to-run-things-locally]

利用Nodejs开启本地服务器，在项目文件夹下运行`http-server . -p 8000`,然后浏览器输入`localhost:8000`就可以看见本地服务器下项目文件了。

[https_blog.csdn.net_yingzi10101118_article_details_83622729]: https://blog.csdn.net/yingzi10101118/article/details/83622729
[https_m.imooc.com_wenda_detail_382131]: https://m.imooc.com/wenda/detail/382131
[https_zhidao.baidu.com_question_319613212.html]: https://zhidao.baidu.com/question/319613212.html
[https_threejs.org_docs_index.html_manual_zh_introduction_How-to-run-things-locally]: https://threejs.org/docs/index.html#manual/zh/introduction/How-to-run-things-locally