淺談FIle協議與Http協議及區別

時間 2019-11-10

原文原文鏈接

背景

先看三段代碼：html

index.html:node

<!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:es6

import * as circle from './test';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

test.js:npm

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本地服務器進行訪問文件，報錯消失。app

什麼是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].jpg

URI中問什麼本地文件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語法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。