MediaPipe自定义.tflite模型加载CORS错误排查求助

一、CORS策略阻止问题（核心原因） #

虽然模型能在浏览器直接打开，但页面脚本跨域请求Google Cloud Storage（GCS）资源时，GCS默认不允许跨域访问，必须手动配置CORS规则：

• 给你的GCS存储桶添加CORS配置，允许页面所在域名（本地开发可填http://localhost:*）的GET请求：
  1. 创建cors.json文件，内容如下：

     [
       {
         "origin": ["http://localhost:5500", "你的生产环境域名"],
         "method": ["GET"],
         "responseHeader": ["Content-Type"],
         "maxAgeSeconds": 3600
       }
     ]
     

  2. 用gcloud命令行工具应用配置：

     gsutil cors set cors.json gs://你的存储桶名称
     

  注意：如果用VSCode的Live Server，默认端口是5500，要把这个域名加入origin；其他本地服务器对应修改端口。

二、脚本与模块加载问题 #

检查HTML中MediaPipe相关脚本的引入逻辑：

• 确保脚本使用ES模块类型，给script标签加上type="module"：

  <script type="module" src="你的图像分类脚本.js"></script>
  

• 确认模型加载路径正确，替换后的代码要使用完整的GCS模型地址，比如：

  const model = await tf.loadGraphModel('https://storage.googleapis.com/你的存储桶名称/自定义模型.tflite');
  

  仔细核对地址拼写，避免路径错误。

三、VSCode本地预览的额外问题 #

• 源码映射404：这是MediaPipe脚本自带的sourcemap引用找不到本地文件导致的，不影响核心功能。要消除提示的话，可在Chrome控制台设置里关闭「Enable JavaScript source maps」选项。
• 本地fetch失败：必须用http协议打开页面（比如VSCode的Live Server），绝对不能直接打开本地HTML文件（file://协议）——file://协议下浏览器的跨域限制极严格，fetch请求会直接失败。

四、验证步骤 #

1. CORS配置生效后，用curl测试跨域权限：

   curl -H "Origin: http://localhost:5500" -I "https://storage.googleapis.com/你的存储桶名称/自定义模型.tflite"
   

   响应头里出现Access-Control-Allow-Origin: http://localhost:5500，说明配置生效。
2. 用http协议打开本地页面，再次测试模型加载。
3. 查看Chrome控制台的错误信息，排除路径拼写、脚本依赖缺失等问题。

内容的提问来源于stack exchange，提问作者razimbres