最近有个需求在网页中查看 CAD,引入 CAD SDK 后报错,但在 demo 项目中可以正常使用。
由于 SDK 是商用的,这里就不方便放出。
经过断点调试,输出 response 后发现,正式项目和 demo 项目返回的类型不一样。
正式项目为 MockXMLHttpRequest
,而 demo项目为 XMLHttpRequest
。
经过搜索,网上提到是 Mockjs 的问题。
下面是查找到的原因。
mockjs原理:
在引入了Mock之后,mock.js内部会创建一个MockXMLHttpRequest来替代原生的XMLHttpRequest,如果有原生的XHR请求来,则拦截,替换成MockXMLHttpRequest对象,然后再匹配对应的url,如果没有,就发送网络请求。
FbxLoader是继承自Three.js的FileLoader对象,调用load方法时,会先判断传入的url是否是Base64格式的DataURI,如果是,则进行解析并返回,如果不是,就创建XHR请求。
到底是哪里出问题了呢?
调试到FbxLoader里,发现在load成功后,得到返回值是buffer,需要进行解析,responseType需要是’arrayBuffer’类型!问题来了,在mockjs的MockXMLHTTP中没有把responseType进行设置,而是设置成了空值,所以,无法解析出buffer对象。
查看正式项目后,发现几乎没有地方使用Mockjs,因此把Mockjs卸载后就可以正常加载 CAD 图纸了。
也有人提到 arrayBuffer 和 blob 类型的数据都会出现问题。
通过设置 Mockjs 而不是卸载来解决问题。
这个方法我没有测试,因此也不保证可用。
1 | Mock.XHR.prototype.proxy_open = Mock.XHR.prototype.open; |