qiankun部署项目，子应用无法在手机端访问，应该怎么排查？

Question

qiankun部署项目，子应用无法在手机端访问，应该怎么排查？

待你如初

19712

发布于
2 月 25 日四川

我的项目部署在外部的服务器

主应用A port:8001
子应用B port:8002
子应用C port:8003

访问未配置https

PC端可以通过域名访问A B C应用，且访问后端端口无异常
但是手机端只能通过IP的方式访问A，且A展示无异常，访问B，C显示白屏
若手机端更替未域名访问，则A B C均访问超时

请问上述问题应该从哪里去排查？

qiankun 移动端

阅读 86

AI BotBETA

排查步骤及解决方案：

1. 网络连通性检查

现象：手机端通过域名访问超时，但IP可访问主应用
- 可能原因：DNS解析失败、手机网络防火墙限制
- 排查：
  1. 手机端通过浏览器开发者工具（如Chrome远程调试）查看域名解析是否成功。
  2. 检查手机网络是否屏蔽了非标准端口（8001/8002/8003），尝试临时开放常用端口（如80/443）测试。
  3. 使用手机终端执行 ping 域名 或 nslookup 域名 验证DNS解析结果。

2. 跨域问题（CORS）

现象：子应用B/C白屏，可能因静态资源跨域拦截

可能原因：子应用的响应头未正确配置跨域策略

解决：

# 子应用B/C的Nginx配置中添加跨域头
location / {
    add_header 'Access-Control-Allow-Origin' '$http_origin';  # 或主应用域名/IP
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
}

3. 子应用静态资源路径问题

现象：白屏可能由资源加载失败导致
- 可能原因：子应用的 publicPath 配置错误或资源路径未适配IP访问
- 解决：
  1. 检查子应用构建时的 publicPath 配置（需为绝对路径，如 //ip:port/ 或 //域名/）。
  2. 确保子应用的入口文件（如 index.html）中资源路径正确（避免相对路径）。

4. Web安全策略（如CSP）

现象：手机浏览器更严格的安全策略可能拦截非HTTPS内容
- 可能原因：未配置HTTPS且未允许不安全内容
- 解决：
  1. 临时关闭子应用的 Content-Security-Policy 测试。
  2. 在CSP中显式允许HTTP资源（需权衡安全性）：
```
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: http: ip:端口">
```

5. 服务端端口暴露问题

现象：手机端无法通过域名访问子应用
- 可能原因：子应用服务未绑定到公网IP或防火墙限制
- 排查：
  1. 检查子应用B/C的服务是否监听 0.0.0.0（而非 127.0.0.1）。
  2. 在服务器执行 netstat -tuln | grep 8002 确认端口监听状态。
  3. 检查服务器防火墙（如ufw/iptables）是否放行8001/8002/8003端口。

6. qiankun配置问题

现象：子应用加载逻辑异常
- 可能原因：子应用入口未适配动态IP/域名环境
- 解决：
  1. 检查子应用的 entry 配置是否为动态地址（如通过环境变量注入域名/IP）。
  2. 确保主应用加载子应用时使用与当前访问协议一致的地址（HTTP/HTTPS）。

7. 浏览器兼容性问题

现象：手机浏览器内核差异导致JS/CSS解析失败
- 排查：
  1. 在手机浏览器控制台查看具体报错（如SyntaxError）。
  2. 检查是否使用ES6+语法或Polyfill缺失（通过Babel配置解决）。

总结优先级：

检查手机端DNS解析和端口连通性
验证子应用跨域配置和静态资源路径
确认服务端防火墙和端口绑定状态
检查浏览器控制台具体报错信息

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进