一 文件訪問和網(wǎng)絡(luò)訪問
我們所制作的簡易網(wǎng)頁(我的叫demo1.html)逸邦，可以通過鼠標(biāo)右鍵->打開方式->使用瀏覽器打開(我使用的Edge瀏覽器)渣窜∑饕唬可以看到捐腿，雖然顯示的依然是正確的網(wǎng)頁格式纵朋，但是，瀏覽器里已經(jīng)給我們顯示出來茄袖，是以的方式打開操软。
可以有另一種方式，當(dāng)我在瀏覽器中直接輸入http://127.0.0.1:8023/demo1.html后宪祥，就可以打開網(wǎng)頁聂薪。打開的當(dāng)然是與上述同一個網(wǎng)頁文檔。
1.1 以文件方式和以http形式去打開網(wǎng)頁蝗羊，有什么不同藏澳？
簡單的html頁面，使用兩種方式打開耀找。就電腦使用者自身而言翔悠，感覺不出不同。但如果你的網(wǎng)頁 以文件形式打開野芒，那么蓄愁，它就沒“跑在網(wǎng)絡(luò)上”。我們制作網(wǎng)頁的目的狞悲，就是為了讓別人看見撮抓。怎么讓別人看見？當(dāng)然是通過網(wǎng)絡(luò)摇锋，但肯定不是通過某些聊天工具胀滚、視頻軟件分享文檔去讓別人看見，如果我網(wǎng)站有
1T乱投，那還能把1T的內(nèi)容都發(fā)過去嗎咽笼？還要不要隱私和保密了？
所以戚炫，網(wǎng)頁以文件的形式剑刑，則僅能在自己電腦上使用；而通過網(wǎng)絡(luò)双肤，則可以進(jìn)行共享施掏，讓別人看見。
我們把跑在網(wǎng)絡(luò)上茅糜，可以讓別人瀏覽的一組網(wǎng)頁(當(dāng)然還有其他東西)七芭，叫做網(wǎng)站、web站點(diǎn)蔑赘、站點(diǎn)或者網(wǎng)絡(luò)服務(wù)
1.2 網(wǎng)絡(luò)服務(wù)是如何提供的狸驳，又是如何被訪問的预明？
我在其他類目的文章中，對這個過程進(jìn)行過闡述耙箍，這里不妨再次簡單說明撰糠。值得說明的是，此處所做出的說明辩昆，與真實(shí)情況相去甚遠(yuǎn)阅酪，只能作為概要性的、通俗的理解汁针。
我們以訪問百度為例术辐。我們個人的手機(jī)，以及百度(想象成一臺電腦)施无，都是網(wǎng)絡(luò)上隔空相望的兩臺設(shè)備辉词，所有在網(wǎng)絡(luò)上運(yùn)行的設(shè)備，都需要有一個唯一性的標(biāo)識帆精，就是IP地址较屿。我們假定極簡后的情況下，個人手機(jī)的IP地址是192.168.0.10而百度大電腦的IP是192.168.0.123卓练。百度為我們提供了很多不同的服務(wù)隘蝎，比如文庫、百度百科襟企、百度知道等等嘱么。這些服務(wù)所提供的功能是絕對不同的，那么我們可以認(rèn)為他們都是一個獨(dú)立的軟件顽悼。也就是說曼振，有三個不同的軟件，運(yùn)行在同一個電腦上蔚龙，都需要對外提供服務(wù)冰评。那么，如果我想要訪問“文庫”的服務(wù)木羹，應(yīng)該如何找到它呢甲雅？就像是如果教室里坐的都是無名氏，我應(yīng)該如何找到某個特定的同學(xué)呢坑填？我們自然而然的可以想到抛人，我們可以先使用IP地址找到百度大電腦，再通過某種方式找到這個應(yīng)用脐瑰。而這里所說的“某種方式”妖枚，就是端口。每個應(yīng)用可以“監(jiān)聽”一個端口苍在，當(dāng)我通過IP找到百度大電腦后绝页，可以通過端口定位到具體的APP荠商，訪問它的服務(wù)。
這是基于IP協(xié)議的網(wǎng)絡(luò)通訊的通俗描述抒寂。
1.3 我是如何讓網(wǎng)頁跑在網(wǎng)絡(luò)上的
在不進(jìn)行任何其他附加操作的情況下结啼，你是無法讓網(wǎng)頁跑在網(wǎng)絡(luò)上的掠剑。為什么屈芜？以及我是做了什么才讓網(wǎng)頁跑起來的呢？
類比上面1.2中的描述朴译，我們的網(wǎng)頁井佑，以及個人的電腦，可以類比描述中的百度大電腦眠寿。我們的網(wǎng)頁是服務(wù)的提供者躬翁，所以想讓網(wǎng)頁跑在網(wǎng)絡(luò)上，網(wǎng)頁必須具有:
- 監(jiān)聽端口
- 處理網(wǎng)絡(luò)請求
的能力盯拱。然而網(wǎng)頁本身是不具備這種能力的盒发，它只是一個腳本、一個文檔狡逢，自己的運(yùn)行都需要依托于瀏覽器宁舰，哪有能力監(jiān)聽電腦的什么端口。所以奢浑，我們需要一個有能力者蛮艰，來幫忙。
能力者是運(yùn)行在個人電腦上一個軟件雀彼，它有能力監(jiān)聽發(fā)向本電腦8023端口(或者其他端口)的所有網(wǎng)絡(luò)請求壤蚜，可以讀取電腦上的所有文件。當(dāng)你需要通過網(wǎng)絡(luò)訪問電腦demo1.html時徊哑，它會將demo1.html以文件的形式進(jìn)行讀取袜刷，之后通過網(wǎng)路向你回饋。這里這個能力者莺丑，我們一般叫做web服務(wù)器應(yīng)用著蟹，這里是指的一個軟件，而非一臺電腦窒盐。通過這個軟件草则，我們電腦上的html網(wǎng)頁就具有了在網(wǎng)絡(luò)上奔跑的能力。
1.3.1 Nginx
下載地址：http://nginx.org/en/download.html
web服務(wù)器應(yīng)用有很多蟹漓，這里我使用的軟件炕横，叫做Nginx。這是一款輕量級葡粒、高性能的服務(wù)器份殿，據(jù)(W3Techs)統(tǒng)計(jì)膜钓，截至2023年9月，市場占有率33.8%卿嘲，排名第二颂斜，僅次于Apache。但在高流量(繁忙)網(wǎng)站上拾枣，其使用率為41.5%沃疮，位居第一，遠(yuǎn)超過Apache(28.2%)梅肤。
Nginx無需安裝司蔬，壓縮包解壓后，簡單配置一下姨蝴，即可直接使用俊啼。整體的目錄結(jié)構(gòu)如下：
其中，第一個黃色文件夾conf里面存放著配置文件左医，是我們必須要編輯的文件授帕。配置完成后，綠色的nginx.exe雙擊可以運(yùn)行浮梢。
注意：當(dāng)已經(jīng)運(yùn)行后跛十，再次修改配置文件，需要?dú)⑺肋M(jìn)程后再次運(yùn)行軟件黔寇，或者執(zhí)行指令nginx -s reload偶器。否則無論點(diǎn)多少遍nginx.exe都不會生效
打開conf文件夾下的nginx.conf進(jìn)行簡單快速配置
其他配置項(xiàng)可以暫時不去管，只看直接端口監(jiān)聽部分:
server {
listen 8023;
server_name localhost;
location / {
root D:/html5_code_injection/;
}
}
配置是分很多級的缝裤，每一級都是用一個{}包裹屏轰。
- 本段代碼的最頂級為
server,意思是一個web服務(wù)，或者你可以理解為一個網(wǎng)絡(luò)站點(diǎn)憋飞，一個網(wǎng)站霎苗。其實(shí)這個軟件可以同時提供多個站點(diǎn)的服務(wù)。 - 向下
listen 8023;, 代表這個web服務(wù)是通過8023端口向網(wǎng)絡(luò)提供服務(wù)的榛做，也就是說唁盏，我這個軟件要監(jiān)聽8023端口的網(wǎng)絡(luò)請求。 - 繼續(xù)向下
server_name localhost;检眯，這個不特別重要厘擂，是指的給你的web服務(wù)一個名字。 - 繼續(xù)向下锰瘸，又出來了新的一個級別刽严。這里
location是指的當(dāng)你在瀏覽器上訪問我的網(wǎng)站時，你所輸入的地址避凝；/是指的從根目錄開始匹配舞萄。整個這一級的意思眨补，是當(dāng)你訪問我的網(wǎng)站時，你輸入不同的地址倒脓，我可以對應(yīng)到我不同的文件夾里撑螺。當(dāng)然此處只配置了一個映射地址，實(shí)際可以通過多個location配置多個映射崎弃，現(xiàn)在先不做考慮甘晤。就像下圖，當(dāng)我們訪問http://127.0.0.1:8023/demo1.html,根目錄后的地址是/demo1.html,Nginx會根據(jù)我們的配置項(xiàng)吊履，把你對demo1.html網(wǎng)絡(luò)請求安皱，轉(zhuǎn)變?yōu)?code>Nginx對文件D:/html5_code_injection/demo1.html的訪問调鬓。
網(wǎng)絡(luò)請求路徑
二 IP和端口以外的東西艇炎，TCP/IP 和 http的第一步
上面的文章中，我們說到腾窝，讓網(wǎng)頁跑在網(wǎng)絡(luò)上的兩組必備數(shù)字缀踪，一個是IP，一個是端口虹脯。但Nginx Web應(yīng)用服務(wù)所做的驴娃，遠(yuǎn)非直接基于IP和端口的無腦信息交互，IP和端口只是給你提供了一個網(wǎng)絡(luò)連接的通道循集，在這個通道里面唇敞，你可以做自由的信息交互。但你并不一定就能基于這個通道獲取到頁面了咒彤。這個通道是TCP/IP協(xié)議給你的疆柔。
下面的圖，是使用TCP/IP協(xié)議進(jìn)行通訊的過程情況镶柱。都是同一個軟件旷档，我打開了兩次。右側(cè)紅字標(biāo)的歇拆，它監(jiān)聽了一個端口(8080)鞋屈，充當(dāng)服務(wù)端(TCP Server)。左側(cè)藍(lán)字標(biāo)的故觅，它連接了服務(wù)端的8080端口厂庇，充當(dāng)客戶端(TCP Client)∈淅簦可以看到谆吴，它其實(shí)可以算作聊天工具了，可以隨意收發(fā)字母徒欣。這其實(shí)就是TCP/IP通道給予我們的能力--隨意的信息交換。這也是我們網(wǎng)絡(luò)的基礎(chǔ)灭返。
在這個基礎(chǔ)上，我是怎么通過網(wǎng)絡(luò)拿到網(wǎng)頁的呢坤邪，直接使用這個工具熙含，是否能拿到網(wǎng)頁呢？回顧我們從瀏覽器上看到網(wǎng)頁時艇纺，是直接在瀏覽器上輸入了http://127.0.0.1:8023/demo1.html怎静。那么我們嘗試以下步驟：
- 使用上面的軟件，連接網(wǎng)頁的
8023端口 - 向服務(wù)器發(fā)送
/demo1.html
結(jié)果就向下面這張圖黔衡，我們的網(wǎng)站對我們的請求是有返回的蚓聘。，仔細(xì)觀察返回內(nèi)容盟劫，可以發(fā)現(xiàn)夜牡，與我們寫的
demo1.html源碼并不一樣。說明侣签，其實(shí)Nginx 服務(wù)器應(yīng)用并沒有正確執(zhí)行我們的請求塘装。這是正常的，因?yàn)槲覀儼l(fā)起的影所，并不是合法的請求蹦肴。
直接請求網(wǎng)頁
如何發(fā)起合法的請求？嘗試如下過程：
- 依然是使用上面的軟件猴娩，連接網(wǎng)頁的
8023端口 - 向服務(wù)器發(fā)送的內(nèi)容有變化阴幌，改為：
GET /demo1.html HTTP/1.1\r\nHost: 127.0.0.1:8023\r\n\r\n
下圖中，左側(cè)為demo1.html的源碼卷中，右側(cè)為發(fā)送上述內(nèi)容后矛双，服務(wù)器的返回。因?yàn)橛袧h字仓坞，會造成亂碼背零。但比較后，你可以發(fā)現(xiàn)他們是正確的內(nèi)容无埃。
