mock模拟数据 踩坑了 整个项目的导出、下载模版 直接乱码 且排查不到竟然是mock原因

88 阅读4分钟

在后端没有给数据时 前端使用了mockjs模拟数据 我把mock引入到了main文件

4.png

3.png

2.png

1.png

在我加完之后 感觉是在后端没给接口时用超级方便!!!
最终项目上线前 开发好的模块中 :导出 和 下载模版功能
发现都是乱码

没人联想到和mock有关 因为导出 和 下载模版是后端做的

后端开始排查此问题

一个下载Excel的数据流接口,下载数据一直乱码

发现:mockjs,会拦截下载的数据最终导致乱码,把引入这个main.js的地方注释掉就行了

当开发人员在开发过程中使用mock数据模拟后端接口时,如果mock服务器未能正确处理某些特定的请求,比如文件下载请求,就可能导致下载的数据出现乱码。这种情况通常发生在以下场景中:

  1. mockServer对未实现接口的影响‌:当后端接口尚未实现时,前端可能会向mockServer发送请求以获取模拟数据。如果mockServer错误地拦截了下载数据的请求,或者对下载数据的处理方式不正确,就会导致乱码问题‌。
  2. mockjs的拦截作用‌:在某些情况下,mockjs会拦截下载的数据,如果处理不当,就会导致乱码。这通常发生在前端在后端没有接口之前会使用mockjs,但这个js会拦截下载的数据,最终导致乱码。通过注释掉引入mockjs的地方,可以解决这个问题‌。
  3. Content-Type和字符集设置不当‌:如果mock服务器在响应头中设置的Content-Type或字符集与实际数据不匹配,也可能导致乱码。例如,如果服务器设置的内容类型与实际返回的数据类型不一致,或者字符集设置错误,都可能导致下载的Excel文件乱码‌。
  4. mock.js的底层代码修改‌:在某些情况下,通过修改mock.js的底层代码,比如调整响应类型或禁用对特定请求的拦截,可以解决乱码问题。这通常涉及到直接编辑node_modules中的mockjs文件,这是一个比较技术性的解决方案‌。

注意:打包时 需要注释掉

综上所述,解决mock导致Excel乱码的问题通常涉及到理解mockServer对未实现接口的影响、调整mockjs的处理方式、确保Content-Type和字符集设置正确,或者在必要时直接修改mock.js的底层代码。