WebPack 4.4中JSON文件的异常行为，为什么？

2024-05-03 • 问答

我使用的是Lottie框架，该框架需要一个JSON文件，并使用JS实时渲染动画。在没有过多输入细节的情况下，我注意到使用webstorm作为IDE在web-pack中出现了奇怪的行为。

var animItem = bodymovin.loadAnimation({
    wrapper: svgContainer,animType: 'svg',loop: false,path: './src/animation/PhoneRotate.json'
});

此方法无效。我在控制台中收到此错误：

Z:1 GET http://localhost:8080/src/animation/data:image/jpeg;base64,/9j/..//Z 431 (Request Header Fields Too Large)

（多次重复）

但是，如果我将JSON文件移到根目录中，则将路径替换为：

PhoneRotate.json

一切正常。即使我在lottie files上加载此JSON文件，也会出现类似的问题。该网站获取您的JSON文件，创建一个链接，您可以使用该链接来链接代码中的动画。同样，在CodePen中测试我的文件，一切正常，在IDE上，根据所使用的浏览器，我收到两个不同的错误：

例如，在野生动物园中，我收到76次（此数字不是偶然的，是动画具有的帧数）此错误：

Failed to load resource: The operation couldn’t be completed. (kCFErrorDomainCFNetwork error 303.)

在Chrome上：

此行为可能与JSON文件的尺寸有关吗？（文件实际上很大）要点是，为什么在Codepen和我项目的根目录中工作？感谢大伙们。