问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
待你如初
    19715

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

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

    访问未配置https

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

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

    qiankun移动端
    阅读 1.2k
    avatarAI 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配置解决）。

    总结优先级：

    1. 检查手机端DNS解析和端口连通性
    2. 验证子应用跨域配置和静态资源路径
    3. 确认服务端防火墙和端口绑定状态
    4. 检查浏览器控制台具体报错信息
    1 个回答
    得票最新
    头像
    玩命的马铃薯
      21
      新手上路，请多包涵

      当qiankun部署的项目中，子应用无法在手机端访问时，可从以下几个方面排查：

      网络连接方面

      • 确认网络环境：检查手机是否连接到正常可用的网络，尝试访问其他网站或应用，判断网络是否畅通。若使用移动数据，查看信号强度；若使用Wi-Fi，检查是否已正确连接且网络正常工作。
      • 检查网络配置：查看项目部署所在服务器的网络配置，是否限制了特定设备或网络段的访问，防火墙规则是否阻止了手机端的请求。

      应用配置方面

      • 检查qiankun配置：查看主应用和子应用的qiankun相关配置，确保子应用的路由配置正确，在主应用中对子应用的注册和挂载配置无误，特别是 base 路径等配置是否符合手机端访问要求。
      • 检查跨域设置：检查主应用和子应用的跨域配置，手机端访问时可能因跨域问题受限。确保 webpack 或其他构建工具中的跨域配置正确，必要时在服务器端进行相应的跨域设置。

      手机兼容性方面

      • 检查系统兼容性：确认子应用是否兼容手机的操作系统及版本，某些CSS样式或JavaScript特性可能在特定系统或版本上存在兼容性问题。可在不同系统和版本的手机上测试。
      • 检查浏览器兼容性：尝试在不同浏览器中访问子应用，查看是否存在浏览器兼容性问题。不同浏览器对HTML、CSS和JavaScript的支持有差异，可能导致页面加载或运行异常。

      代码和构建方面

      • 检查代码错误：查看子应用代码中是否有在手机端导致错误的逻辑，如未正确处理屏幕尺寸变化、触摸事件等。利用浏览器开发者工具或手机端调试工具查看错误信息。
      • 检查资源加载问题：检查子应用的资源文件是否正确构建和部署，是否存在资源文件缺失、路径错误等问题，导致在手机端无法正常加载。

      服务器方面

      • 查看服务器日志：查看服务器端日志，获取子应用在手机端访问时的相关错误信息，如请求是否到达服务器、服务器是否返回正确响应等。
      • 检查服务器性能：监测服务器的CPU、内存等资源使用情况，若服务器负载过高，可能影响对手机端请求的处理。
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题