Android端Chrome无法读取本地Web应用的外部JavaScript文件

我之前帮不少开发者处理过这个问题，咱们一步步来排查解决：

问题根源 #

Android 上的 Chrome 出于安全考量，对 file:// 协议加载的本地文件有更严格的同源访问限制——哪怕 JS 和 HTML 在同一个文件夹，也可能因为 file:// 协议的特殊规则被拦截，这和电脑上 Chrome 对本地文件的宽松处理逻辑不一样。

具体解决方法 #

• 先检查 JS 文件的引用路径
  确保你用的是相对路径，比如 <script src="app.js"></script>，别用手机存储的绝对路径（比如 <script src="/storage/emulated/0/MyApp/app.js"></script>）。另外要注意 Android 文件系统是区分大小写的，电脑上 App.js 和 app.js 可能能正常识别，但手机上会直接找不到文件，一定要保证文件名和引用代码完全一致。

• 开启 Chrome 的本地文件访问开关
  这是最直接的快速解决方法：

  1. 打开手机 Chrome，在地址栏输入 chrome://flags/#allow-file-access-from-files
  2. 找到「Allow access to files from file URLs」选项，把它改成「Enabled」
  3. 重启 Chrome 后再尝试加载你的本地网页

• 用本地 HTTP 服务器运行（更推荐）
  这个方法彻底避开 file:// 协议的限制，和线上生产环境的运行逻辑完全一致：

  • 如果你有电脑，且手机和电脑在同一个局域网：
    1. 打开电脑的终端/命令提示符，进入 HTML 和 JS 所在的文件夹
    2. 若你装了 Python3，运行命令 python -m http.server 8000
    3. 找到电脑的局域网 IP（Windows 用 ipconfig，Mac/Linux 用 ifconfig 或 ip addr 查看）
    4. 手机 Chrome 里输入 http://你的电脑局域网IP:8000/你的HTML文件名.html 就能访问，此时外部 JS 会正常加载
  • 不想用电脑的话，可以在手机上装一款轻量的本地 HTTP 服务器 APP，把文件导入后通过 http://localhost 类的地址访问。

• 检查 Chrome 权限和版本

  • 去手机的「设置 → 应用 → Chrome → 权限」里，确认「存储」权限是允许的，不然 Chrome 可能读不到本地文件夹里的 JS 文件
  • 把 Chrome 更新到最新版本，旧版本可能存在已修复的本地文件访问 Bug

内容来源于stack exchange