WebGL本地OBJ顶点文件fetch请求失败问题求助

• 检查fetch目标URL是否正确
  你当前测试代码里请求的还是远程地址，本地测试时必须把URL改成http://localhost:4000/cube.obj（或者相对路径/cube.obj，如果测试页面和服务器根目录同源）。

• 排查本地服务器的静态文件配置
  很多轻量服务器会对非常见文件类型（比如.obj）返回错误的MIME类型，导致fetch无法正常解析：

  1. 打开浏览器开发者工具的Network面板，找到该请求，查看Status Code是否为200，Content-Type是否为text/plain或model/obj
  2. 如果MIME类型错误，换用可配置的服务器，比如Node.js的express，示例代码：

     const express = require('express');
     const app = express();
     
     // 为.obj文件设置正确的MIME类型
     app.get('*.obj', (req, res, next) => {
       res.setHeader('Content-Type', 'model/obj');
       next();
     });
     
     app.use(express.static('./')); // 假设.obj文件在当前运行目录
     app.listen(4000, () => console.log('服务器运行在localhost:4000'));
     

• 确认同源访问
  如果你是用file://协议直接打开本地HTML页面，或者从其他端口的页面请求localhost:4000，会触发CORS限制。必须确保测试页面也是通过http://localhost:4000访问的，和.obj文件同域。

• 验证本地文件完整性
  本地保存的cube.obj可能下载不完整，对比远程文件和本地文件的大小，或者直接打开本地文件查看内容是否和远程一致。

增强版调试代码（方便定位问题） #

async function main() {
  try {
    // 替换为你的本地URL
    const response = await fetch('http://localhost:4000/cube.obj');
    if (!response.ok) {
      console.error('请求失败，状态码:', response.status);
      alert(`请求失败：状态码 ${response.status}`);
    } else {
      const content = await response.text();
      console.log('文件内容预览:', content.slice(0, 100)); // 打印前100字符验证
      alert("请求成功");
    }
  } catch (error) {
    console.error('请求异常:', error);
    alert(`请求异常：${error.message}`);
  }
  return null;
}

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