关于由Windows下pycharm远程连接和启动WSL下node执行的node项目，无法在浏览器通过`localhost"port`以及 ‘ip:port’方式无法访问该服务问题

问题描述

在Windows11中使用WSL，系统为ubuntu20.04.2,用pycharm启动WSL中的ubuntu系统中的vite项目，运行在5173端口，

在pycharm的命令行窗口已经看到服务正常在端口上运行了，但是浏览器无法通过localhost:5173访问，也无法通过指定ubuntu的IP地址 + 端口号访问，

我首先测试了该服务在WSL中正常运行，可以看到执行程序为node，但是在WSL通过curl -I访问得到的页面是空白页面，在powershell中访问，则完全不可访问，

无论是localhost : port还是curl -I localhost:port的方式都无法访问，请问可能是哪些原因造成的？如何解决呢？

时而可以通过localhost访问时而不可以这样，请问问题可能出现在哪里？

时而不能访问某个容器[CS架构访问数据库类容器]，这次是不能访问vite项目，但重启有概率解决

基本信息

PS C:\Users\41999> wsl -v
WSL 版本： 1.2.5.0
内核版本： 5.15.90.1
WSLg 版本： 1.0.51
MSRDC 版本： 1.2.3770
Direct3D 版本： 1.608.2-61064218
DXCore 版本： 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows 版本： 10.0.25387.1200

PS C:\Users\41999> Get-CimInstance Win32_OperatingSystem | Select-Object Caption,Version,OSArchitecture,ServicePackMajorVersion,BuildNumber
Caption                 : Microsoft Windows 11 专业版
Version                 : 10.0.25387
OSArchitecture          : 64 位
ServicePackMajorVersion : 0
BuildNumber             : 25387

ChatGPT给出的解决方案

在你的情况下，出现无法通过浏览器访问和使用curl命令访问的问题可能有几个原因：

防火墙设置：请确保Windows防火墙或其他防火墙软件没有阻止对端口5173的访问。尝试禁用防火墙或添加相应的入站规则来允许端口5173的通信。
WSL网络配置：检查WSL网络配置是否正确。确保WSL的网络设置为默认的"WSL 2 Default"，并且分配了正确的IP地址。
路由配置：确认你的网络路由是否正确。尝试使用WSL的IP地址（而不是localhost）来访问服务，确保在同一网络中，并且路由设置正确。
运行在正确的WSL分发版本上：确保你的vite项目是在正确的WSL分发版本（例如Ubuntu 20.04.2）上运行，并且已经正确配置和启动。
服务绑定的IP地址和端口：在vite项目的配置中，确认服务绑定的IP地址和端口是否正确设置为0.0.0.0和5173。
其他网络问题：检查网络连接是否稳定，确保网络正常工作。尝试使用其他网络环境（例如移动热点）来测试访问情况。

针对以上可能的原因，你可以逐一排除并尝试解决问题。另外，确保你的vite项目已经正确配置和运行，并且没有其他错误或异常。

如果问题仍然存在，请提供更多细节和错误信息，以便我能够提供更具体的帮助。

实际运行后的结论

首先分别查看5173端口号在Ubuntu和Windows上是否被非法占用情况,前者由node占用，后者无占用

其次通过curl分别在Windows和Linux下查看目标网页localhost:port/ip:port，无法获取或者为空白页面

最后查看防火墙

检查主机文件的Hosts条目：在Windows主机上，打开以下文件以检查是否存在与localhost相关的条目：

C:\Windows\System32\drivers\etc\hosts
确保没有被注释掉的与"localhost"或"127.0.0.1"相关的条目。如果有注释掉的条目，请取消注释并保存文件。

尝试完成上述操作后，重新启动WSL和PyCharm，并尝试通过浏览器访问localhost:5173或使用WSL的IP地址进行访问。如果问题仍然存在，请提供任何相关的错误消息或进一步的详细信息，以便我能够提供更准确的帮助。

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

解决过程信息

该项目在pycharm中CMD的显示情况

       VITE v4.1.4  ready in 244 ms
     
       ➜  Local:   http://localhost:5173/
       ➜  Network: use --host to expose
       ➜  press h to show help

我在浏览器通过localhost:5173以及ip:port即172.31.158.99:5173访问时遇到如下信息

     嗯… 无法访问此页面172.31.158.99 已拒绝连接。
     请尝试：
     
     在 web 上搜索 172 31 158 99
     检查连接
     检查代理和防火墙
     ERR_CONNECTION_REFUSED
     
     
     检查 Internet 连接
     请检查你的网络电缆、调制解调器和路由器。
     要允许 Microsoft Edge 访问网络，请在防火墙或防病毒软件中进行 设置。
     如果它已被列为允许访问网络的程序，请尝试 将其从列表中删除，然后重新添加。
     如果使用代理服务器:
     请检查代理设置。你可能需要向组织询问代理服务器是否正在工作。如果你认为不应该使用代理服务器，请设置 > 系统 > 打开计算机的代理设置

Linux下网络配置

     (base) tylor@Legion:~[imath:0] ifconfig
     docker0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
             inet 172.17.0.1  netmask 255.255.0.0  broadcast 172.17.255.255
             inet6 fe80::42:58ff:fec7:c366  prefixlen 64  scopeid 0x20<link>
             ether 02:42:58:c7:c3:66  txqueuelen 0  (Ethernet)
             RX packets 10769  bytes 9530686 (9.5 MB)
             RX errors 0  dropped 0  overruns 0  frame 0
             TX packets 9037  bytes 1173445 (1.1 MB)
             TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
     
     eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
             inet 172.31.158.99  netmask 255.255.240.0  broadcast 172.31.159.255
             inet6 fe80::215:5dff:fe66:5da9  prefixlen 64  scopeid 0x20<link>
             ether 00:15:5d:66:5d:a9  txqueuelen 1000  (Ethernet)
             RX packets 2292  bytes 748220 (748.2 KB)
             RX errors 0  dropped 0  overruns 0  frame 0
             TX packets 748  bytes 58618 (58.6 KB)
             TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
     
     # 以下均为docker的虚拟网卡

Windows11本机host配置

     # Copyright (c) 1993-2009 Microsoft Corp.
     #
     # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
     #
     # This file contains the mappings of IP addresses to host names. Each
     # entry should be kept on an individual line. The IP address should
     # be placed in the first column followed by the corresponding host name.
     # The IP address and the host name should be separated by at least one
     # space.
     #
     # Additionally, comments (such as these) may be inserted on individual
     # lines or following the machine name denoted by a '#' symbol.
     #
     # For example:
     #
     #      102.54.94.97     rhino.acme.com          # source server
     #       38.25.63.10     x.acme.com              # x client host
     
     # localhost name resolution is handled within DNS itself.
     #	127.0.0.1       localhost
     #	::1             localhost

在Linux通过命令lsof -i:5173查看端口号占用情况得到如下反馈

     (base) tylor@Legion:~[/imath:0] lsof -i:5173
     COMMAND  PID  USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
     node    8680 tylor   18u  IPv4 107415      0t0  TCP localhost:5173 (LISTEN)

在Windows下查看端口占用，其结果如下

     PS C:\Users\41999> netstat -ano | findstr :5173
     PS C:\Users\41999> netstat -ano | findstr 172.31.158.99:5173
     PS C:\Users\41999> netstat -ano | findstr 127.0.0.1:5173

通过curl -I 127.0.0.1:5173得到如下反馈

     (base) tylor@Legion:~[imath:0] curl -I 127.0.0.1:5173
     HTTP/1.1 200 OK
     Access-Control-Allow-Origin: *
     Content-Type: text/html
     Cache-Control: no-cache
     Etag: W/"1ab-IJ0xQJXEwa71YPSLIMMK+sL5iNc"
     Date: Wed, 14 Jun 2023 00:29:09 GMT
     Connection: keep-alive
     Keep-Alive: timeout=5

使用curl -i 127.0.0.1:5173命令，得到如下反馈，我将其黏贴并且作为HTML文件打开时，是一个空白网页

     (base) tylor@Legion:~[/imath:0] curl -i 127.0.0.1:5173
     HTTP/1.1 200 OK
     Access-Control-Allow-Origin: *
     Content-Type: text/html
     Cache-Control: no-cache
     Etag: W/"1ab-IJ0xQJXEwa71YPSLIMMK+sL5iNc"
     Date: Wed, 14 Jun 2023 00:29:34 GMT
     Connection: keep-alive
     Keep-Alive: timeout=5
     Content-Length: 427
     
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <script type="module" src="/@vite/client"></script>
     
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + Vue</title>
       </head>
       <body>
         <div id="app"></div>
         <script type="module" src="/src/main.js"></script>
       </body>
     </html>

在Windows下通过 curl命令获得如下反馈

     PS C:\Users\41999> Invoke-WebRequest -URI 127.0.0.1:5173
     Invoke-WebRequest : 无法连接到远程服务器
     所在位置 行:1 字符: 1
     + Invoke-WebRequest -URI 127.0.0.1:5173
     + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         + CategoryInfo          : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest]，WebException
         + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand
     
     PS C:\Users\41999> Invoke-WebRequest -URI 172.31.158.99:5173
     Invoke-WebRequest : 无法连接到远程服务器
     所在位置 行:1 字符: 1
     + Invoke-WebRequest -URI 172.31.158.99:5173
     + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         + CategoryInfo          : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest]，WebException
         + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand

而我通过 node程序反向查看运行状态时，得到如下反馈

      (base) tylor@Legion:~[imath:0] ps -ef | grep node
      root         104       1  0 03:21 ?        00:00:00 snapfuse /var/lib/snapd/snaps/lxd_22753.snap /snap/lxd/22753 -o ro,nodev,allow_other,suid
      root         105       1  0 03:21 ?        00:00:00 snapfuse /var/lib/snapd/snaps/core20_1879.snap /snap/core20/1879 -o ro,nodev,allow_other,suid
      root         112       1  0 03:21 ?        00:00:00 snapfuse /var/lib/snapd/snaps/snapd_19122.snap /snap/snapd/19122 -o ro,nodev,allow_other,suid
      root         113       1  0 03:21 ?        00:00:04 snapfuse /var/lib/snapd/snaps/snapd_19361.snap /snap/snapd/19361 -o ro,nodev,allow_other,suid
      root         114       1  0 03:21 ?        00:00:00 snapfuse /var/lib/snapd/snaps/core20_1891.snap /snap/core20/1891 -o ro,nodev,allow_other,suid
      root         115       1  0 03:21 ?        00:00:00 snapfuse /var/lib/snapd/snaps/lxd_24061.snap /snap/lxd/24061 -o ro,nodev,allow_other,suid
      tylor       1121    1066  1 03:21 ?        00:03:45 /usr/share/kibana/bin/../node/bin/node /usr/share/kibana/bin/../src/cli/dist --ops.cGroupOverrides.cpuPath=/ --ops.cGroupOverrides.cpuAcctPath=/
      tylor      12369   12367  0 09:11 pts/0    00:00:00 /bin/sh -c export PATH="/opt/node-v18.16.0-linux-x64/bin:[/imath:0]PATH" && cd /home/tylor/floatlight/floatlightweb && /opt/node-v18.16.0-linux-x64/bin/yarn run dev
      tylor      12370   12369  0 09:11 pts/0    00:00:00 node /opt/node-v18.16.0-linux-x64/bin/yarn run dev
      tylor      12382   12381  0 09:11 pts/0    00:00:00 /opt/node-v18.16.0-linux-x64/bin/node /home/tylor/floatlight/floatlightweb/node_modules/.bin/vite
      tylor      12393   12382  0 09:11 pts/0    00:00:00 /home/tylor/floatlight/floatlightweb/node_modules/@esbuild/linux-x64/bin/esbuild --service=0.16.17 --ping
      tylor      12642   12597  0 09:18 pts/7    00:00:00 grep --color=auto node

WSL下防火墙已关闭

      (base) tylor@Legion:~$ sudo ufw status
      [sudo] password for tylor:
      Status: inactive