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

问题描述

• 在Windows11中使用WSL，子系统为ubuntu20.04.2,用pycharm启动WSL中的的vite项目， 运行在5173端口，在pycharm的命令行窗口已经看到服务正常在端口上运行了，但是浏览器无法通过localhost:5173访问，也无法通过指定ubuntu的IP地址 + 端口号访问，

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

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

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

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

基本信息

ChatGPT给出的解决方案

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

1. 防火墙设置：请确保Windows防火墙或其他防火墙软件没有阻止对端口5173的访问。尝试禁用防火墙或添加相应的入站规则来允许端口5173的通信。

2. WSL网络配置：检查WSL网络配置是否正确。确保WSL的网络设置为默认的"WSL 2 Default"，并且分配了正确的IP地址。

3. 路由配置：确认你的网络路由是否正确。尝试使用WSL的IP地址（而不是localhost）来访问服务，确保在同一网络中，并且路由设置正确。

4. 运行在正确的WSL分发版本上：确保你的vite项目是在正确的WSL分发版本（例如Ubuntu 20.04.2）上运行，并且已经正确配置和启动。

5. 服务绑定的IP地址和端口：在vite项目的配置中，确认服务绑定的IP地址和端口是否正确设置为0.0.0.0和5173。

6. 其他网络问题：检查网络连接是否稳定，确保网络正常工作。尝试使用其他网络环境（例如移动热点）来测试访问情况。

针对以上可能的原因，你可以逐一排除并尝试解决问题。另外，确保你的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地址进行访问。如果问题仍然存在，请提供任何相关的错误消息或进一步的详细信息，以便我能够提供更准确的帮助。

解决过程信息

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

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

Linux下网络配置

 
以下均为docker的虚Windows11本机host配置

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

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

使用curl命令得到如下反馈

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

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

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

WSL下防火墙已关闭

补充信息

如果我们将某个项目启动的服务放置在0.0.0.0这个IP上，有什么好处呢？

将某个项目启动的服务放置在0.0.0.0这个IP上，可以让该服务绑定到所有可用的网络接口上，包括本地连接和远程连接，而不是只绑定到一个特定的IP地址上。这样做的好处有以下几点：

1. 可以让本地和远程的客户端都可以访问该服务，方便进行开发和测试。

2. 可以避免IP地址冲突的问题，因为服务不会只绑定到一个特定的IP地址上。

3. 可以增强服务的可用性和负载均衡能力，因为服务可以在多个网络接口上同时运行。

需要注意的是，将服务绑定到0.0.0.0这个IP上可能会带来一些安全风险，因为它可以让任何人都可以访问该服务。因此，在生产环境中，我们应该仅将服务绑定到特定的IP地址上，以增强安全性。

解决方案

由徐晓峰老师提供

在vite项目配置文件package.json中，将内容修改为

原来的配置为

最终解决方案

修改宿主机和WSL的host文件，以及在wsl.config中配置宿主机与WSL的localhots映射，的确能够打通宿主机与子系统的网络连接，但仍然会失效，所以建议前后端项目均直接使用WSL的IP地址进行通信。

出错的原因

• 浏览器通过 IP(WSL): Port无法访问，是因为localhost与 127.0.0.1无映射关系，提供页面渲染服务的vite项目监听了localhost主机名而非127.0.0.1，改变vite的配置项之后，使得项目直接监听了127.0.0.1，而我取消了注释，使得二者可以正常映射，配置文件的路径为Windows的配置C:\Windows\System32\drivers\etc\hosts。同时保持前端和后端项目除了端口号不同以外，均在127.0.0.1这个IP地址上，再结合跨域即可解决。

• 访问前端页面，主页无法加载两个组件header && bottom的文字信息，banner 组件的静态图片信息的原因：前后端监听的端口不在同一个IP，以IP(WSL): Port访问前端时，前端用axios代理请求去获取API接口，跨域的豁免名单无此IP地址，且Redis缓存配置的路径仍然是127.0.0.1，主要是跨域行为被阻止，导致无法获取静态资源。

• 关于访问逻辑：浏览器地址栏输入IP(WSL): Port 或者 127.0.0.1: Port ，访问前端资源时，前端原来配置的项目监听地址为http://localhost:5173/, localhost 与 127.0.0.1无映射关系，自然不可以访问。按照正常的逻辑，项目部署在WSL，端口监听时，对localhost/127.0.0.1的访问是映射给WSL的IP地址172.31.158.99

特别鸣谢

1. 感谢徐晓伟老师的指导，分别给出指定IP和0.0.0.0不安全但内外部IP均可访问的方式

2. 感谢诸位群友帮忙联合调试，并且解释原理，和跳出问题本身给出解决人的问题的方法

3. 群友0x1234，Leo025， Debin 平替建议， hyper-v + WSL内自定义网卡， VirtualBox

4. 群友 HarsheXF 宿主机与WSL网络隔离

5. 蓝胖子头像群友补充：host.docker.internal

6. 群友0x1234的提问让我明白，在展示IDE和浏览器联调的时候，应当给出明确的项目整体结构信息 和 前后端访问链路和逻辑，才能更好理解调试过程

额外的信息

如何增强解决此类项目网络通信的问题的能力？

（布莱克士多）你可能缺操作系统原理和计算机网络基础，要不考虑找个考研视频先看看 培训班是不会教你这些的

所以我最后想问大家一个问题，就是怎么来提升对项目的理解呢？感觉我还是处于一种CV代码的水平，虽然偶尔为了解决问题会逐步调试？

（椰奶肥羊 小甘雨）或者可以从不依赖视频讲解，自己尝试读懂一个项目做起，没有别人的指导，自己来想，理解的深度是不一样的。可能也许只是一个bot，或者只是一个web应用，或者一个简单的存储引擎，先找个觉得还行的，抄一下，有个大概的印象。这种东西本来就不是一蹴而就的

参考【Microsoft doc】

1. 使用 WSL 访问网络应用程序 https://learn.microsoft.com/zh-cn/windows/wsl/networking#accessing-a-wsl-2-distribution-from-your-local-area-network-lan

2. https://learn.microsoft.com/en-us/windows/wsl/wsl-config#example-wslconfig-file