mockjs导致arrayBuffer类型数据错误

最近有个需求在网页中查看 CAD,引入 CAD SDK 后报错,但在 demo 项目中可以正常使用。

由于 SDK 是商用的,这里就不方便放出。

经过断点调试,输出 response 后发现,正式项目和 demo 项目返回的类型不一样。

正式项目为 MockXMLHttpRequest,而 demo项目为 XMLHttpRequest

经过搜索,网上提到是 Mockjs 的问题。

下面是查找到的原因。

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
2
3
4
5
6
7
8
9
10
Mock.XHR.prototype.proxy_open = Mock.XHR.prototype.open;
Mock.XHR.prototype.open = function() {
let responseType = this.responseType;
this.proxy_open(...arguments)
if (this.custom.xhr) {
if (responseType) {
this.custom.xhr.responseType = responseType
}
}
}