使用ngrok内网穿透后无法访问

Question

如图，使用vue-cli脚手架生成的vue项目，运行在80端口，然后使用ngrok进行内网穿透，访问生成的地址后浏览器报错，网上找遍了也没看到和我一样的问题

Answer 1

阿走. 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

根据你提供的信息，问题是使用ngrok进行内网穿透后无法访问。出现的错误信息是无法构造WebSocket。

解决这个问题可以尝试以下几个步骤：

1. 检查ngrok是否正确配置：确保ngrok的配置文件中指定的本地端口与你的vue项目运行的端口一致。默认情况下，ngrok会将本地端口8080映射到外部端口。

2. 检查ngrok服务是否正常运行：运行ngrok服务，然后在浏览器中打开ngrok生成的地址，检查是否能够正常访问。

3. 检查浏览器的安全设置：由于ngrok使用的是https协议进行内网穿透，浏览器可能会对不安全的WebSocket连接进行阻止。你可以尝试在浏览器地址栏中输入chrome://flags，找到"Allow invalid certificates for resources loaded from localhost"选项并启用它。

4. 关闭webpack-dev-server的WebSocket支持：由于ngrok已经提供了WebSocket支持，可以尝试禁用vue-cli生成的webpack-dev-server中的WebSocket支持。在vue项目的vue.config.js文件中添加以下配置：

   module.exports = {
     devServer: {
       hot: false,
       liveReload: false
     }
   }
   

   这样可以禁用掉webpack-dev-server的WebSocket支持，让ngrok的WebSocket支持生效。

5. 其他可能的解决方案：

   • 确保ngrok客户端的版本是最新的，可以尝试更新ngrok客户端。
   • 检查防火墙和路由器设置，确保ngrok的流量被允许通过。
   • 尝试使用其他内网穿透工具，如frp或serveo。

希望这些解决方案能够帮助你解决问题。如果还有其他问题，请提供更多详细信息，我们会尽力帮助你解决。