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

Question

我在 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)
    }
}

SubtitleEntity接口只是 JSON 对象的形状

尝试后，我在控制台中收到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.edyoutoo.media/subtitles/167A0DFC566B971A/167A0DFC566B971A-O.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 

我假设这是因为响应在全部数据到达之前就解决了。资源上的 CORS 权限工作正常 - 我曾经Postman测试请求并且数据按预期交付。

在开发工具的网络选项卡中，请求显示响应代码 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 完成的？为什么在请求结束之前解决未来（承诺）？

谢谢你的帮助。

标签： javascriptfetchaxios