如何解决React项目自定义域名myshop.local无法访问问题（WSL2+Ubuntu）

1. 修正WSL2的hosts文件路径（如果存在笔误） #

你提到的/ets/hosts是路径错误，正确路径为/etc/hosts。用管理员权限编辑该文件：

sudo nano /etc/hosts

确认文件中存在127.0.0.1 myshop.local这一行，保存后退出（按Ctrl+O确认保存，Ctrl+X退出编辑器）。

2. 同步修改Windows系统的hosts文件 #

浏览器运行在Windows系统中，而WSL2的网络与Windows隔离，必须在Windows端也添加域名映射：

• 打开文件资源管理器，导航到C:\Windows\System32\drivers\etc
• 右键点击hosts文件，选择用记事本（或其他编辑器）以管理员身份打开
• 添加一行：127.0.0.1 myshop.local
• 保存文件（若提示权限不足，确认是用管理员身份打开的）

3. 确保React项目的.env文件生效 #

• 确认.env文件放在React项目的根目录（与package.json同一层级）
• 检查文件内容，确保无多余空格或格式错误：

  HOST=myshop.local
  PORT=3000
  

• 重启npm run start，查看启动日志是否显示Starting the development server on http://myshop.local:3000，出现该提示则说明.env配置生效。

4. 配置WSL2端口转发到Windows #

WSL2的端口默认可能未转发到Windows，需手动设置：

1. 在WSL2终端执行以下命令，获取WSL2的IPv4地址：

   hostname -I | awk '{print $1}'
   

2. 在Windows系统中打开管理员权限的命令提示符，执行端口转发命令（将<WSL_IP>替换为上一步获取的地址）：

   netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=<WSL_IP>
   

   注意：WSL2重启后IP可能变化，需重新执行以上步骤更新转发规则。

5. 检查Windows防火墙设置 #

Windows防火墙可能拦截了3000端口的访问：

• 可临时关闭Windows防火墙测试，若能访问则说明是防火墙问题
• 永久解决方案：打开「Windows Defender 防火墙」→「高级设置」→「入站规则」→「新建规则」，选择「端口」，指定TCP端口3000，允许连接，完成规则创建。

内容的提问来源于stack exchange，提问作者Filippo854