Javascript Fetch/Axios-在promise解决之前下载大型静态JSON文件不完整的数据

我在S3上有大型静态JSON文件，其中包含视频文件的转录本，使用

fetch（）

和

Axios

加载它们时遇到困难。JSON文件的大小介于50-100KB之间，请求似乎在整个文件下载之前就解决了-开发者控制台显示文件到达时状态为200，但我在浏览器中发现错误：

private subtitleUri: string = "https://static.edyoutoo.media/subtitles/167A0DFC566B971A/167A0DFC566B971A-O.json"

// using fetch api
async $fetch(): Promise<SubtitleEntity> {
    const blob = await fetch(this.subtitleUri)
    console.log(blob)
    const json = await blob.json()
    console.log(json)
    return json
}

// using axios
async fetch(): Promise<SubtitleEntity> {
    const ax = Axios.create()
    try {
      const req = await ax.get(this.subtitleUri)
      console.log(req)
      return req.data
    } catch (err) {
      console.error(err)
    }
}

我假设这是因为响应在全部数据到达之前就已经确定了资源上的CORS权限工作正常-我使用

Postman

测试请求，数据按预期交付。

在Dev Tools的Network选项卡中，请求显示为响应代码200，数据有时全部在那里，有时显示此错误：

SyntaxError: JSON.parse: end of data when property name was expected at line 855 column 3 of the JSON data

同样，我认为这是因为数据传输不完整

我做错了什么？我来自Java/C++背景，在那里我们只需将传入数据收集到while循环中的字符缓冲区中，一旦请求完成，数据就会被解析并返回给调用方

如何使用Axios库或fetch API实现这一点？为什么它要在请求结束之前解决未来（承诺）

---

谢谢您的帮助。

您的第一条错误消息告诉您没有检索该资源的权限。然而，你提到了诸如不完整的请求之类的事情，诸如此类，并且没有做出明显的努力来修复你收到消息的错误惑儒：不管怎样，看看这个：权限是可以的-我在《邮递员》中测试了这个，结果很好。所有S3 CORS权限都设置正确。这是浏览器的事。邮递员不验证CORS。请读一篇文章。您必须正确配置后端，以便能够使用JavaScriptNah mate在浏览器中获取此文件，它们不是，实际上不是。对您提供的url进行的XMLHttpRequest在Chrome中会得到以下消息：“Cross Origin Read Blocking（CORB）blocked Cross Origin response with MIME type application/json”。此外，如果您查看文件的响应头，只有两组：

内容类型

和上次修改的

。注意到完全没有提到起源吗？这就是问题所在，伙计。：）我发现这是Cloudfront缓存头的问题—我发送的示例文件缓存了没有“访问控制”头的头，即使在无效后，它也会缓存一个域（开发域）的CORS头，并且只缓存该域。我发现Cloudfront的任何解决方案都很乏味，所以我决定换一个方向。
SyntaxError: JSON.parse: end of data when property name was expected at line 855 column 3 of the JSON data