Windows11與WSL的通信故障
localhost"port以及 ‘ip:port’方式無(wú)法訪(fǎng)問(wèn)該服務(wù)問(wèn)題
問(wèn)題描述
在Windows11中使用WSL，子系統(tǒng)為ubuntu20.04.2,用pycharm啟動(dòng)WSL中的的vite項(xiàng)目， 運(yùn)行在5173端口，在pycharm的命令行窗口已經(jīng)看到服務(wù)正常在端口上運(yùn)行了，但是瀏覽器無(wú)法通過(guò)
localhost:5173訪(fǎng)問(wèn)，也無(wú)法通過(guò)指定ubuntu的IP地址 + 端口號(hào)訪(fǎng)問(wèn)，我首先查看了端口占用情況，該服務(wù)在WSL中正常運(yùn)行，可以看到執(zhí)行程序?yàn)閚ode，但是在WSL通過(guò)
curl -I訪(fǎng)問(wèn)得到的頁(yè)面是空白頁(yè)面，在powershell中訪(fǎng)問(wèn)，則完全不可訪(fǎng)問(wèn)無(wú)論是localhost : port還是curl -I localhost:port的方式都無(wú)法訪(fǎng)問(wèn)，請(qǐng)問(wèn)可能是哪些原因造成的？如何解決呢？
時(shí)而可以通過(guò)localhost訪(fǎng)問(wèn)時(shí)而不可以，請(qǐng)問(wèn)問(wèn)題可能出現(xiàn)在哪里？
時(shí)而不能訪(fǎng)問(wèn)某個(gè)容器[CS架構(gòu)訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)類(lèi)型的容器]，這次是不能訪(fǎng)問(wèn)vite項(xiàng)目，但重啟有概率解決
基本信息
ChatGPT給出的解決方案
出現(xiàn)無(wú)法通過(guò)瀏覽器訪(fǎng)問(wèn)和使用curl命令訪(fǎng)問(wèn)的問(wèn)題可能有幾個(gè)原因：
防火墻設(shè)置：請(qǐng)確保Windows防火墻或其他防火墻軟件沒(méi)有阻止對(duì)端口5173的訪(fǎng)問(wèn)。嘗試禁用防火墻或添加相應(yīng)的入站規(guī)則來(lái)允許端口5173的通信。
WSL網(wǎng)絡(luò)配置：檢查WSL網(wǎng)絡(luò)配置是否正確。確保WSL的網(wǎng)絡(luò)設(shè)置為默認(rèn)的"WSL 2 Default"，并且分配了正確的IP地址。
路由配置：確認(rèn)你的網(wǎng)絡(luò)路由是否正確。嘗試使用WSL的IP地址（而不是localhost）來(lái)訪(fǎng)問(wèn)服務(wù)，確保在同一網(wǎng)絡(luò)中，并且路由設(shè)置正確。
運(yùn)行在正確的WSL分發(fā)版本上：確保你的vite項(xiàng)目是在正確的WSL分發(fā)版本（例如Ubuntu 20.04.2）上運(yùn)行，并且已經(jīng)正確配置和啟動(dòng)。
服務(wù)綁定的IP地址和端口：在vite項(xiàng)目的配置中，確認(rèn)服務(wù)綁定的IP地址和端口是否正確設(shè)置為
0.0.0.0和5173。其他網(wǎng)絡(luò)問(wèn)題：檢查網(wǎng)絡(luò)連接是否穩(wěn)定，確保網(wǎng)絡(luò)正常工作。嘗試使用其他網(wǎng)絡(luò)環(huán)境（例如移動(dòng)熱點(diǎn)）來(lái)測(cè)試訪(fǎng)問(wèn)情況。
針對(duì)以上可能的原因，你可以逐一排除并嘗試解決問(wèn)題。另外，確保你的vite項(xiàng)目已經(jīng)正確配置和運(yùn)行，并且沒(méi)有其他錯(cuò)誤或異常。
如果問(wèn)題仍然存在，請(qǐng)?zhí)峁└嗉?xì)節(jié)和錯(cuò)誤信息，以便我能夠提供更具體的幫助。
實(shí)際運(yùn)行后的結(jié)論
首先分別查看
5173端口號(hào)在Ubuntu和Windows上是否被非法占用情況,前者由node占用，后者無(wú)占用其次通過(guò)
curl分別在Windows和Linux下查看目標(biāo)網(wǎng)頁(yè)localhost:port/ip:port，無(wú)法獲取或者為空白頁(yè)面最后查看防火墻
檢查主機(jī)文件的Hosts條目：在Windows主機(jī)上，打開(kāi)以下文件以檢查是否存在與localhost相關(guān)的條目：
C:\Windows\System32\drivers\etc\hosts 確保沒(méi)有被注釋掉的與"localhost"或"127.0.0.1"相關(guān)的條目。如果有注釋掉的條目，請(qǐng)取消注釋并保存文件。
嘗試完成上述操作后，重新啟動(dòng)WSL和PyCharm，并嘗試通過(guò)瀏覽器訪(fǎng)問(wèn)localhost:5173或使用WSL的IP地址進(jìn)行訪(fǎng)問(wèn)。如果問(wèn)題仍然存在，請(qǐng)?zhí)峁┤魏蜗嚓P(guān)的錯(cuò)誤消息或進(jìn)一步的詳細(xì)信息，以便我能夠提供更準(zhǔn)確的幫助。
解決過(guò)程信息
該項(xiàng)目在pycharm中CMD的顯示情況
我在瀏覽器通過(guò)localhost:5173以及ip:port即172.31.158.99:5173訪(fǎng)問(wèn)時(shí)遇到如下信息
Linux下網(wǎng)絡(luò)配置
?
以下均為docker的虛Windows11本機(jī)host配置
在Linux通過(guò)命令lsof -i:5173查看端口號(hào)占用情況得到如下反饋
在Windows下查看端口占用，其結(jié)果如下
使用curl命令得到如下反饋
使用curl -i 127.0.0.1:5173命令，得到如下反饋，我將其黏貼并且作為HTML文件打開(kāi)時(shí)，是一個(gè)空白網(wǎng)頁(yè)
在Windows下通過(guò) curl命令獲得如下反饋
?
而我通過(guò) node程序反向查看運(yùn)行狀態(tài)時(shí)，得到如下反饋
WSL下防火墻已關(guān)閉
補(bǔ)充信息
如果我們將某個(gè)項(xiàng)目啟動(dòng)的服務(wù)放置在0.0.0.0這個(gè)IP上，有什么好處呢？
將某個(gè)項(xiàng)目啟動(dòng)的服務(wù)放置在0.0.0.0這個(gè)IP上，可以讓該服務(wù)綁定到所有可用的網(wǎng)絡(luò)接口上，包括本地連接和遠(yuǎn)程連接，而不是只綁定到一個(gè)特定的IP地址上。這樣做的好處有以下幾點(diǎn)：
可以讓本地和遠(yuǎn)程的客戶(hù)端都可以訪(fǎng)問(wèn)該服務(wù)，方便進(jìn)行開(kāi)發(fā)和測(cè)試。
可以避免IP地址沖突的問(wèn)題，因?yàn)榉?wù)不會(huì)只綁定到一個(gè)特定的IP地址上。
可以增強(qiáng)服務(wù)的可用性和負(fù)載均衡能力，因?yàn)榉?wù)可以在多個(gè)網(wǎng)絡(luò)接口上同時(shí)運(yùn)行。
需要注意的是，將服務(wù)綁定到0.0.0.0這個(gè)IP上可能會(huì)帶來(lái)一些安全風(fēng)險(xiǎn)，因為它可以讓任何人都可以訪(fǎng)問(wèn)該服務(wù)。因此，在生產(chǎn)環(huán)境中，我們應(yīng)該僅將服務(wù)綁定到特定的IP地址上，以增強(qiáng)安全性。
解決方案
由徐曉峰老師提供
在vite項(xiàng)目配置文件package.json中，將內(nèi)容修改為
原來(lái)的配置為
最終解決方案
修改宿主機(jī)和WSL的host文件，以及在wsl.config中配置宿主機(jī)與WSL的localhots映射，的確能夠打通宿主機(jī)與子系統(tǒng)的網(wǎng)絡(luò)連接，但仍然會(huì)失效，所以建議前后端項(xiàng)目均直接使用WSL的IP地址進(jìn)行通信。
出錯(cuò)的原因
瀏覽器通過(guò)
IP(WSL): Port無(wú)法訪(fǎng)問(wèn)，是因?yàn)閘ocalhost與127.0.0.1無(wú)映射關(guān)系，提供頁(yè)面渲染服務(wù)的vite項(xiàng)目監(jiān)聽(tīng)了localhost主機(jī)名而非127.0.0.1，改變vite的配置項(xiàng)之后，使得項(xiàng)目直接監(jiān)聽(tīng)了127.0.0.1，而我取消了注釋?zhuān)沟枚呖梢哉Ｓ成?，配置文件的路徑為Windows的配置C:\Windows\System32\drivers\etc\hosts。同時(shí)保持前端和后端項(xiàng)目除了端口號(hào)不同以外，均在127.0.0.1這個(gè)IP地址上，再結(jié)合跨域即可解決。訪(fǎng)問(wèn)前端頁(yè)面，主頁(yè)無(wú)法加載兩個(gè)組件header && bottom的文字信息，banner 組件的靜態(tài)圖片信息的原因：前后端監(jiān)聽(tīng)的端口不在同一個(gè)IP，以
IP(WSL): Port訪(fǎng)問(wèn)前端時(shí)，前端用axios代理請(qǐng)求去獲取API接口，跨域的豁免名單無(wú)此IP地址，且Redis緩存配置的路徑仍然是127.0.0.1，主要是跨域行為被阻止，導(dǎo)致無(wú)法獲取靜態(tài)資源。關(guān)于訪(fǎng)問(wèn)邏輯：瀏覽器地址欄輸入
IP(WSL): Port或者127.0.0.1: Port，訪(fǎng)問(wèn)前端資源時(shí)，前端原來(lái)配置的項(xiàng)目監(jiān)聽(tīng)地址為http://localhost:5173/, localhost 與127.0.0.1無(wú)映射關(guān)系，自然不可以訪(fǎng)問(wèn)。按照正常的邏輯，項(xiàng)目部署在WSL，端口監(jiān)聽(tīng)時(shí)，對(duì)localhost/127.0.0.1的訪(fǎng)問(wèn)是映射給WSL的IP地址172.31.158.99
特別鳴謝
感謝徐曉偉老師的指導(dǎo)，分別給出指定IP和
0.0.0.0不安全但內(nèi)外部IP均可訪(fǎng)問(wèn)的方式感謝諸位群友幫忙聯(lián)合調(diào)試，并且解釋原理，和跳出問(wèn)題本身給出解決人的問(wèn)題的方法
群友0x1234，Leo025， Debin 平替建議， hyper-v + WSL內(nèi)自定義網(wǎng)卡， VirtualBox
群友 HarsheXF 宿主機(jī)與WSL網(wǎng)絡(luò)隔離
藍(lán)胖子頭像群友補(bǔ)充：host.docker.internal
群友0x1234的提問(wèn)讓我明白，在展示IDE和瀏覽器聯(lián)調(diào)的時(shí)候，應(yīng)當(dāng)給出明確的項(xiàng)目整體結(jié)構(gòu)信息 和 前后端訪(fǎng)問(wèn)鏈路和邏輯，才能更好理解調(diào)試過(guò)程
額外的信息
如何增強(qiáng)解決此類(lèi)項(xiàng)目網(wǎng)絡(luò)通信的問(wèn)題的能力？
（布萊克士多）你可能缺操作系統(tǒng)原理和計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ)，要不考慮找個(gè)考研視頻先看看 培訓(xùn)班是不會(huì)教你這些的
所以我最后想問(wèn)大家一個(gè)問(wèn)題，就是怎么來(lái)提升對(duì)項(xiàng)目的理解呢？感覺(jué)我還是處于一種CV代碼的水平，雖然偶爾為了解決問(wèn)題會(huì)逐步調(diào)試？
（椰奶肥羊 小甘雨）或者可以從不依賴(lài)視頻講解，自己嘗試讀懂一個(gè)項(xiàng)目做起，沒(méi)有別人的指導(dǎo)，自己來(lái)想，理解的深度是不一樣的?？赡芤苍S只是一個(gè)bot，或者只是一個(gè)web應(yīng)用，或者一個(gè)簡(jiǎn)單的存儲(chǔ)引擎，先找個(gè)覺(jué)得還行的，抄一下，有個(gè)大概的印象。這種東西本來(lái)就不是一蹴而就的
參考【Microsoft doc】
使用 WSL 訪(fǎng)問(wèn)網(wǎng)絡(luò)應(yīng)用程序
https://learn.microsoft.com/zh-cn/windows/wsl/networking#accessing-a-wsl-2-distribution-from-your-local-area-network-lanhttps://learn.microsoft.com/en-us/windows/wsl/wsl-config#example-wslconfig-file
