基于Safari内核的iOS浏览器无法加载TensorFlow.js模型的问题排查与解决求助

阿华AIGC实验室

2026-4-30

iOS Safari内核下TensorFlow.js模型加载失败的解决方案

结合你描述的问题——iOS端（包括Chrome iOS）无法发送TensorFlow.js模型的GET请求，且前端报错unexpected identifier 'tf'，我整理了几个针对性的解决方案：

1. 修复ES模块与全局变量的作用域冲突

你的model_init.js使用了type="module"声明为ES模块，而ES模块有独立的作用域，默认无法直接访问全局作用域中的tf变量（通过CDN引入的tf.min.js会把tf挂载到window对象上）。这是导致unexpected identifier 'tf'的核心原因。

解决方式A：在模块中明确引用`window.tf`

修改model_init.js的核心代码：

model.net = await window.tf.loadGraphModel('./models/web_model/model.json');

解决方式B：改用模块形式引入TensorFlow.js

替换原有的CDN脚本为模块版本，这样可以在ES模块中直接导入tf：

<script type="module">
  // 导入TensorFlow.js的ES模块版本
  import * as tf from 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.8.0/dist/tf.esm.min.js';
  // 可选：将tf挂载到全局，方便其他模块或脚本访问
  window.tf = tf;
</script>
<script type="module" src="./javascripts/model_init.js"></script>

2. 调整后端路由逻辑，确保静态资源优先处理

你的后端代码中，app.get('*')会匹配所有GET请求，可能拦截了express.static对模型文件的处理逻辑，导致后端无法记录模型请求的日志。

修改后端路由顺序，让静态资源中间件优先处理请求，app.get('*')仅作为页面兜底路由：

// 先添加请求日志中间件，方便排查请求情况
app.use((req, res, next) => {
  console.log(`[Request] ${req.method} ${req.path}`);
  next();
});

// 优先处理public目录下的静态资源
app.use(express.static('public'));

// 处理页面路由（比如移动端首页）
app.get('/', (req, res) => {
  const indexFile = path.join(__dirname, 'index_mobile.html');
  res.sendFile(indexFile);
});

// 兜底处理404请求
app.get('*', (req, res) => {
  res.status(404).send('Not found');
});

这样模型文件（如model.json）会由express.static正确处理，你也能通过日志中间件看到浏览器是否发送了模型请求。

3. 验证并优化MIME类型配置

Safari内核对MIME类型的校验确实更严格，确保你的后端对以下文件类型返回正确的MIME：

model.json: application/json（你的配置已包含，无需修改）
模型权重文件（.bin）: application/octet-stream（你的配置已包含，无需修改）
ES模块脚本（.js）: 虽然你的配置中js对应application/javascript是标准值，但Safari对模块脚本的MIME兼容性更好的是text/javascript，可以尝试修改：

var mime = {
  // ... 其他类型保持不变
  js: 'text/javascript',
  // ...
};

4. 升级TensorFlow.js版本

你使用的@tensorflow/tfjs@3.8.0是2021年的旧版本，存在不少Safari兼容性问题。建议升级到较新的稳定版本（如v4.x系列），新版本修复了大量浏览器兼容性BUG：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.14.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-vis.umd.min.js"></script>