localhost启动server && mobile device如何访问

前提

Mobile device 和 computer 在同一个网络下。

问题描述

• 发现有些bug只能在真机上能够复现，因此尝试电脑上启动本地服务器，服务server在8080端口
• 将手机的网络调至和电脑一个网络中
• 使用ifconfig找出电脑的IP地址
• 使用手机访问http://IP:8080/path

发现看到了一个纯HTML页面

解决思路

为什么只能看到纯HTML页面

在我之前的认知里,如果只看到了HTML页面，并且还是一个填充了data的HTML页面，就说明只有ssr起作用了，browser side rendering（bsr）挂了.. so 我就一直反复的想为啥bsr没有生效呢。。。当别人告诉我这只是css文件没加载出来。。我还一直沉迷在bsr的漩涡中（感觉自己贼蠢）

实践告诉我们，只想不做是没有办法解决问题的，so：

第一步就是疯狂的找有用的log信息

---

mobile出错但是moblie看不到log，浏览器总能看到。尝试使用浏览器访问和mobile相同的路由,惊现相同的问题。

只要出现问题，请打开控制台看一下先

发现css和js的请求失败了,好吧你们说的对是因为css文件请求失败，log信息中还有请求的url。

为啥只有css和JS会失败，HTML咋不失败？

贴两张图直接表明原因：

• 第一张： 前后端分离的情况

  
  
  image.png

• 第二张：服务器端渲染

  image.png

从上图中可以看出了：

  - 请求8080端口只是拿回来了HTML页面（带数据因为ssr）
  - 不论你是ssr还是bsr都需要再次单独的访问css和js文件，webpack通常会帮助我们将css文件JS文件分别打包，因此在HTML中使用`link/script` tag引用url

因此，只出现HTML的原因是： css和Js的请求挂掉了。

第二步：请求挂了，找到请求的URL，以及返回的状态码

---

一看到请求的url，就瞬间明白了, 路径是这样的： http://localhost:8000/assets/client.css

呵呵呵，这种请求，不晓得手机的localhost会不会疯掉，我的项目启动了8000端口启动静态服务器，储存css以及js文件。

为了解决这个问题：需要分成两个步骤：

• 修改代码里请求的URL将host改为your IP
• 修改启动在8000端口的服务器的host改为your IP

那么还需要将8080的host改成your IP吗？

• 首先你请求8080端口成功的拿到了HTML说明你是可以访问这个服务器的

  补充一下，我的8080是express服务器，express 默认的host是0.0.0.0因此这里通过访问IP也可以访问到我的服务器。

第三步 服务器重启，OK可以访问到了

---

总结

• 想要debug mobile，mobile只能通过访问你的IP address
• 如果有请求需要访问IP address，那么必须要保证你的服务器可以监听到IP Host的请求（coz： 大多数的服务器默认启动在localhost，是不能监听到IP address的请求的）
• 只能看到HTML页面，说明css以及JS文件请求失败