同个前端页面，在手机端和PC端打开，访问到的资源有可能不是同一个

怼烎@ 2023-10-10 19:44 34阅读 0赞

#### 目录 ####

*   *  一、例
     *  二、知识点
     *   *  通讯方面
         *  问题的定位
         *  在PC端以手机模式打开并调试前端页面

--------------------

记录项目遇到的问题，问题表现为：

1、用手机端和PC端打开同一个前端页面，通讯到达的后端服务却不是同一个

排查：

1、确认手机端和PC端打开后，实际访问的前端资源并不是同一个

2、手机端配置的socket端口有误，所以没有到达正确的后端服务

--------------------

### 一、例 ###

1、前端页面访问地址：[http://127.0.0.1:8229/xxx/index\_websocket.html][http_127.0.0.1_8229_xxx_index_websocket.html]

2、在PC端打开，实际访问到的是：index\_websocket.html

3、在手机端打开，实际访问到的是：index\_app.html

4、通过查看前端代码，手机端打开时的跳转页面是可以自己定义的，案例代码如下

--------------------

### 二、知识点 ###

#### 通讯方面 ####

1、手机端的通讯，可以是Socket、HTTP

2、PC端的通讯，可以是WebSocket、Socket、HTTP

3、查看Socket、HTTP通信信息  
![在这里插入图片描述][059babb630b2420ca0041d7363d734a5.png]  
  
4、查看websocket通信信息  
![在这里插入图片描述][8d031fd5be094f699173d71bad0e21fb.png]

--------------------

#### 问题的定位 ####

1、出现问题时，先确认PC端、手机端各自的通讯配置是否有误，确保消息的通讯能到达正确的后端服务

2、PC端应检查：WebSocket、Socket、HTTP等配置的地址及端口号

3、手机端应检查：Socket、HTTP等配置的地址及端口号

--------------------

#### 在PC端以手机模式打开并调试前端页面 ####

1、在浏览器输入需要调整的前端页面访问地址

2、按F12进入开发者调试页面

3、点击以下按钮就能以手机模式访问该前端页面  
![在这里插入图片描述][909926a402a94e6faf9bbff5b35466a1.png]

[http_127.0.0.1_8229_xxx_index_websocket.html]: https://kf.baiyunairport.com:8229/FS_WEB_IM214_EN/index_websocket.html
[059babb630b2420ca0041d7363d734a5.png]: https://img-blog.csdnimg.cn/059babb630b2420ca0041d7363d734a5.png
[8d031fd5be094f699173d71bad0e21fb.png]: https://img-blog.csdnimg.cn/8d031fd5be094f699173d71bad0e21fb.png
[909926a402a94e6faf9bbff5b35466a1.png]: https://img-blog.csdnimg.cn/909926a402a94e6faf9bbff5b35466a1.png