浅谈FIle协议与Http协议及区别
背景
先看三段代碼：
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跨域的錯誤，網上查找的說是瀏覽器禁止訪問本地文件。
?
?
檢查思路
1. 瀏覽器版本過低，不支持es6語法。于是升級瀏覽器至最新（Chrome）,但是問題依舊沒有解決。
?
2. 本地不支持module模塊，通過：
$ npm install -g es-checker $ es-checker?
檢查本地對ES6的支持，發現問題并不在這里
?
3. 通過bable（在這里就不對bable做敘述了）將ES6語法轉化成ES5語法，瀏覽器依舊報CORS跨域問題。
?
4. 在外網一段回答中主要到回答者提到http和file,于是思考可能是協議使用錯誤。最后通過localhost本地服務器進行訪問文件，報錯消失。
?
?
什么是File協議
字面意思：本地文件傳輸協議
?
什么是File：
file協議主要用于訪問本地計算機中的文件，好比通過Windows的資源管理器中打開文件或者通過右鍵單擊‘打開’一樣。
?
如何使用：
file協議的基本格式如下：
file:///文件路徑比如需要打開E盤下txt目錄中的index.txt，那么在資源管理器或者瀏覽器地址欄中輸入：file:///E:/txt/index.txt。用file:///+文件地址，其實等價于文件的地址。即：
file:///C:/Users/CLi/AppData/Local/Temp/WindowsLiveWriter1627300719/supfiles52F410/wangdan-se-436963[2].jpg等價于：
C:/Users/CLi/AppData/Local/Temp/WindowsLiveWriter1627300719/supfiles52F410/wangdan-se-436963[2].jpgURI中問什么本地文件file后面跟三個斜杠？
URI的結構為：
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]如果有host，前面需要加//，因此對于http或https等網絡地址來說會寫成：
https://blog.csdn.net/lishanleilixin/article/category/7191777這樣看上去很自然。如果是文件的話，文件沒有host，所以中間的host部分就不要了，就變成了:
file:///lishanleilixin/article/category/7191777因為如果沒有host的話，第一個[]的內容就不存在了，這種同意的寫法有一個標準叫CURIE。
?
?
什么是http協議
簡介：
http協議是Hyper Text JTransfer Protocol,即超文本闡述協議的縮寫。是用來從萬維網服務器傳輸超文本到本地瀏覽器的傳送協議，基于TCP/IP通信協議來傳輸數據。http協議工作于客戶端-服務器架構上，瀏覽器作為http客戶端通過url向http服務器端發送請求，服務器接收到請求后，向客戶端發送請求。
?
HTTP的URL：
http使用統一資源標識符URI來傳輸數據和建立連接。而URL是一種特殊類型的URI。
https://www.baidu.com/s?wd=csdn&rsv_spt=1&rsv_iqid=0xe20f5fa6000102e9&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=62095104_9_oem_dg&rsv_enter=0&oq=http%25E5%258D%258F%25E8%25AE%25AE&rsv_t=cb7eJrt8QfdumTZWig9t5bWhzpKMGLyic5Ap1V%2BZyjA0%2Bsb90A7ykpqzyVk7WUQpEpUaayWEhYo&rsv_pq=876fe1b90002819e&inputT=496865&rsv_sug3=107&bs=http%E5%8D%8F%E8%AE%AE?
完整的URL包含下面幾個部分：
協議：該URL的協議部分為“https”，標識網頁使用的是https協議，在internet中可以使用多種協議（http,https,ftp等）
?
域名：一個URL中也可以使用IP作為域名，這個URL中域名為www.baidu.com
?
端口：跟在域名后，以“:”作為分隔符。如果省略端口，那么將采用默認端口。
?
虛擬目錄：虛擬目錄不是必須部分。是從域名后第一個“/”開始到最后一個“/”為止。
?
文件名：從域名后的最后一個“/”開始到“？”為止，是文件名部分，如果沒有“?”,則是從域名后的最后一個“/”開始到“#”為止，是文件部分，如果沒有“？”和“#”，那么從域名后的最后一個“/”開始到結束，都是文件名部分。文件名部分也不是一個URL必須的部分，如果省略該部分，則使用默認的文件名。
?
錨：從“#”開始到最后都是錨，錨也不是一個URL必須的部分。
?
參數：從“？”開始到“#”為止中間為參數，參數可以允許有多個參數，中間以“&”作為分隔符。
?
請求方法：
GET 請求指定的頁面信息，并返回實體主體。 HEAD 類似于get請求，只不過返回的響應中沒有具體的內容，用于獲取報頭 POST 向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改。 PUT 從客戶端向服務器傳送的數據取代指定的文檔的內容。 DELETE 請求服務器刪除指定的頁面。 CONNECT HTTP/1.1協議中預留給能夠將連接改為管道方式的代理服務器。 OPTIONS 允許客戶端查看服務器的性能。 TRACE 回顯服務器收到的請求，主要用于測試或診斷。?
瀏覽器通過file://訪問文件和http://訪問文件的區別
file協議用于訪問本地計算機中的文件，好比通過資源管理器中打開文件一樣，需要主要的是它是針對本地的，即file協議是訪問你本機的文件資源。
http訪問本地的html文件，相當于將本機作為了一臺http服務器，然后通過localhost訪問的是你自己電腦上的本地服務器，再通過http服務器去訪問你本機的文件資源。
再簡單點就是file只是簡單請求了本地文件，將其作為一個服務器未解析的靜態文件打開。而http是在本地搭建了一個服務器再通過服務器去動態解析拿到文件。
?
其他區別：
file協議只能在本地訪問
本地搭建http服務器開放端口后他人也可以通過http訪問到你電腦中的文件，但是file協議做不到
file協議對應有一個類似http的遠程訪問，就是ftp協議，即文件傳輸協議。
file協議無法實現跨域
?
?
問題解決
開始通過file協議直接訪問index.html，在index.html中靜態引入index.js，在index.js中import test.js。在import的過程中需要http服務器去解析es6語法并添加header頭信息去跨域引入test.js，但是file協議相當于通過資源管理器靜態訪問index.html，中間的過程沒有http服務器參與解析，所以無法識別es6的import語法。
轉載于:https://www.cnblogs.com/Anderson-An/p/10087207.html
總結
以上是生活随笔為你收集整理的浅谈FIle协议与Http协议及区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [源码和文档分享]基于VC++控制台实现
- 下一篇： 爬虫作业